Question

这是我在stackoverflow上的第一篇文章！

我正在尝试使用Twitter Bootstrap重叠包含图像的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>

Answer 1

所以，我已经做了这些改变并且有效：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将position:absolute用于要放在图像上方的所有dom元素

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

使用引导程序重叠图像上的文本

2 个答案: