用bootstrap重疊圖片上的文字

這是我在stackoverflow上的第一篇文章！用bootstrap重疊圖片上的文字

我想重疊包含圖像與Twitter引導的div上的文本。我在一個帶有PSD的網站上工作，我必須製作一些文本的視差，有時半部分重疊一些圖像。

但我聽說z-index不適用於bootstrap，是嗎？

我嘗試過使用縮略圖類的技巧，但它似乎並不是一個好的解決方案。我發佈了我的代碼，希望有人能幫助我。謝謝。

.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>

來源

2016-05-16 Yanis Ismail

所以，我所做的這些變化和工作原理：

.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>

來源

2016-05-16 14:50:28

使用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>

來源

2016-05-16 16:28:18

用bootstrap重疊圖片上的文字

回答

相關問題