用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重叠图片上的文字

回答

相关问题