ブートストラップを使って画像にテキストを重ねる

Question

これは私の最初の投稿です！

Twitter Bootstrapでイメージを含むdivのテキストを重複させようとしています。私はPSDを使ってウェブサイトを制作しています。テキストの一部の視差を作成しなければならない場合があります。

しかし、私はz-indexがブートストラップで動作しないと聞いていましたか？

サムネイルクラスのトリックで試しましたが、良い解決策ではないようです。私は自分のコードを掲示し、誰かが私を助けることを願っています。ありがとう。

.thumbnail { 
 
    position:relative; 
 
} 
 

 
.thumbnail_legend { 
 
    background: none repeat scroll; 
 
    opacity: 1; 
 
    left:0; 
 
    position: absolute; 
 
} 
 

 
.organic{ 
 
    margin-top:3%; 
 
} 
 

 
.organic img{ 
 
    width: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="organic container"> 
 
    <div class="row"> 
 
     <h2 class ="col-xs-2 col-xs-offset-2 col-sm-2 col-sm-offset-2 col-md-2 col-md-offset-2 col-lg-2 col-lg-offset-2">ORGANIC 
 
     </h2> 
 
     <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 thumbnail"><img src="elem/photo-1-idea.jpg" alt="organic infusions"/> 
 
     </div> 
 
     <p class="col-xs-4 col-xs-offset-2 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2 thumbnail_legend"> Nos infusions en tige offrent une nouvelle façon de consommer les plantes issues de terroirs exceptionnels. 
 
     </p> 
 
    </div> 
 
</div>

Answer 1

ので、私はこれらの変更を行ってきたし、それが動作します：

.organic{ 
 
    position: relative; 
 
    margin-top:3%; 
 
} 
 

 
.organic img{ 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
.organic h2 { 
 
    position:absolute; top:0; z-index:10; 
 
} 
 
.organic p { 
 
    position:absolute; top:50px; z-index:10; 
 
}

<div class="organic container"> 
 
     <div class="row"> 
 
     <div class="col-xs-7 col-xs-offset-4 col-sm-7 col-sm-offset-4 col-md-7 col-md-offset-4 col-lg-7 col-lg-offset-4"><img src="elem/photo-1-idea.jpg" alt="organic infusions"/></div> 
 
     <h2 class="col-xs-2 col-xs-offset-2 col-sm-2 col-sm-offset-2 col-md-2 col-md-offset-2 col-lg-2 col-lg-offset-2"> ORGANIC</h2> 
 
     <p class="col-xs-4 col-xs-offset-2 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2"> Nos infusions en tige offrent une nouvelle façon de consommer les plantes issues de terroirs exceptionnels.</p> 
 
     </div> 
 
    </div>

Answer 2

使用position:absoluteをあなたが入れたいすべてのDOM要素に画像の上に

.thumbnail { 
 
    position:relative; 
 
} 
 
.thumbnail img { 
 
    position:absolute; 
 
} 
 
.thumbnail_legend { 
 
    padding:10px; 
 
    position: absolute; 
 
} 
 

 
.organic{ 
 
    margin-top:3%; 
 
} 
 
.organic h2 { position:absolute;padding-top: 0;z-index:2; padding-left:10px;} 
 
.organic p { position:absolute; padding-top: 15%; z-index:2;} 
 
.organic img{ 
 
    width: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="organic container"> 
 
    <div class="row"> 
 
     
 
     <div class="col-xs-8 col-xs-offset-2 thumbnail"> 
 
     <img src="http://www.kriesi.at/themes/enfold/wp-content/themes/enfold/config-layerslider/LayerSlider/avia-samples/slide2_browser.png" alt="organic infusions"/> 
 
     
 
     <h2>ORGANIC</h2> 
 
     <p class= "thumbnail_legend"> Nos infusions en tige offrent une nouvelle façon de consommer les plantes issues de terroirs exceptionnels. 
 
     </p> 
 
    </div> 
 
</div> 
 
    </div>