jquery - 使用 bootstrap 将文本重叠在图像上

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

所以，我已经完成了这些更改并且有效:

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