画像上の特定の位置にテキストとボタンを付ける

画像の（h1）にテキストを置きたいのですが、画像の不透明度の影響を受けています。どうすれば影響を受けないようにすることができますか？テキストのすぐ下にボタンを配置したいが、画像の下にボタンを置く。第3の問題は、 `screenshot of the webpage 画像上の特定の位置にテキストとボタンを付ける

@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400'); 
 

 
body{ 
 
    font-family: 'Quicksand', sans-serif; 
 
    width: 100%; 
 
} 
 

 
.container-fluid { 
 
    width: 100%; 
 
    padding: 0px; 
 
    
 
} 
 

 
#top-header { 
 
    text-align: center; 
 
    background: #480000 ; 
 
} 
 
    
 
.inner { 
 
    
 
    max-width:960px; 
 
    margin: 0 auto; 
 
    min-height: 50px; 
 
} 
 

 
.nav a { 
 
    
 
    display: block; 
 
    padding: 8px; 
 
    color: white; 
 
    padding-top: 15px; 
 
} 
 

 
.txt{ 
 

 
    top: 32%; 
 
    left: 15%; 
 
    font-size: 2.5vw; 
 
    color: green; 
 
    font-weight: bolder; 
 
} 
 

 
.main-img { 
 
    opacity: 0.5; 
 
    width: 100%; 
 
    z-index: -1; 
 
} 
 

 

 
.btn { 
 
    top: 40%; 
 
    left: 20%; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta http-equiv="X-UA-Compatible" content="IE-edge"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 
     <title></title> 
 
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400&amp;subset=latin-ext" rel="stylesheet"> 
 
     <link rel="stylesheet" href="stylesheet/style.css"> 
 
    </head> 
 

 
    <body> 
 
    <div class="container-fluid"> 
 
     <div class="row header row-fluid" id="top-header"> 
 
      <div class="inner"> 
 
       <nav class="nav topnav"> 
 
       <a href="#home">Home</a> 
 
       <a href="#protfolio">Protfolio</a> 
 
       <a href="#service">Serviice</a> 
 
       <a href="#contact">Contact</a> 
 
       <a href="#about">About</a> 
 
       </nav> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="container-fluid main-div"> 
 
      <div class="row"> 
 
       <div> 
 
        <h1 class="txt col-md-4">We Know how to get your Job done</h1> 
 
        <img class="img-fluid main-img" src="images/12.jpg" alt="main-image"> 
 
        <a class="btn btn-primary" href="#">Pro</a> 
 
       </div> 
 
      </div> 
 
      
 
     </div> 
 
    </div> 
 

 
    
 
     
 
    </body> 
 

 
</html>

を撮影し、それが画面に（テキストおよび画像）のナビゲーションバーとdivの間に空きが示すように、ということである、事前にあなたに感謝

出典

2017-10-27 Abdallah Shehata

あなたが一番上に持っているしたい層にとしてだけでなく、画像にZインデックスを追加する必要がまず第一に、これはあなたのopacity問題、

第二に、と目を解決しますあなたは上部にあるか、下部にある要素のpositionを変更する必要があります。私は.btnと.txt

UPDATEへの絶対位置を追加しました：

@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400'); 

body{ 
    font-family: 'Quicksand', sans-serif; 
    width: 100%; 
} 

.container-fluid { 
    width: 100%; 
    padding: 0px; 

} 

#top-header { 
    text-align: center; 
    background: #480000 ; 
} 

.inner { 

    max-width:960px; 
    margin: 0 auto; 
    min-height: 50px; 
} 

.nav a { 

    display: block; 
    padding: 8px; 
    color: white; 
    padding-top: 15px; 
} 

.txtbutton { 
    position: absolute; 
    left: 20%; 
    top: 5rem; 
    z-index: 100; 
} 

.txt{ 
    font-size: 2.5vw; 
    color: green; 
    font-weight: bolder; 
    z-index: 100; 
    max-width: 100%; 
} 

.main-img { 
    opacity: 0.5; 
    width: 100%; 
    z-index: 0; 
} 


.btn { 
    display: block; 
    z-index: 100; 
    font-size: 2.5vw; 
    line-height: 2.5vw; 
    width: 10vw; 
    margin-left: 40%; 
}

HTML：：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE-edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
     <title></title> 
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400&amp;subset=latin-ext" rel="stylesheet"> 
     <link rel="stylesheet" href="stylesheet/style.css"> 
    </head> 

    <body> 
    <div class="container-fluid"> 
     <div class="row header row-fluid" id="top-header"> 
      <div class="inner"> 
       <nav class="nav topnav"> 
       <a href="#home">Home</a> 
       <a href="#protfolio">Protfolio</a> 
       <a href="#service">Serviice</a> 
       <a href="#contact">Contact</a> 
       <a href="#about">About</a> 
       </nav> 
      </div> 
     </div> 

     <div class="container-fluid main-div"> 
      <div class="row"> 
       <div style = 'width:100%;'> 
        <div class = 'txtbutton'> 
        <h1 class="txt col-md-4">We Know how to get your Job done</h1> 
        <a class="btn btn-primary" href="#">Pro</a> 
        </div> 
        <img class="img-fluid main-img" src="images/12.jpg" alt="main-image"> 

       </div> 
      </div> 

     </div> 
    </div> 



    </body> 

</html>

出典

2017-10-28 00:37:04

があなたをありがとう、あなたは以下にCSSとHTML変更した場合、あなたは望んだ結果が表示されますあなたが上で述べたようにそれは役に立ちましたが、私は別の問題を抱えていました。絶対的な位置を使用してウィンドウのサイズを変更し、テキストを下に移動すると、このスクリーンショット[link]（https： /imgur.com/Qa0KHvX）またそこに右側に余分な空白がありますが、私は位置の値を変更しようとしましたが、私はまだ同じ問題を抱えています –

空白を取り除くには、親divの100％の幅を作る必要があります。サイズ変更の問題を取り除くと、divやボタン、テキストを正しくラップするのが良いです。CSSとhtmlファイルの更新を参照してください。 –

これはもっとはっきりしています。 –

画像上の特定の位置にテキストとボタンを付ける

答えて

関連する問題