html - 有没有办法在 Bootstrap 中的图片上显示 html 文本？

Question

我有以下 html 代码:

<div class="text-center">
  <div class="row">
    <div class="col-md-6">gdshdhfdhfdhfd</div>
    <div class="col-md-6"><img src="http://image.com/img.png" alt="cat"></div>
  </div>
<h4>header.</h4>
<p>hey there</p>
<div class="paddown">
<a class="btn btn-default" name="close" id="close" >Close</a>
</div>
</div>

我想在图片上添加任何文本(例如 <span id="txt">lorem ipsum</span> )，比方说距离底部大约 30-40 像素，这样它就可以在猫的图片前面看到。是否可以在不使用绝对定位的情况下进行 Bootstrap ？

这是我的 fiddle :http://jsfiddle.net/2wujw71x/3/

Answer 1

这种方法的总体思路是将图像包装在一个包含图像的元素中，该元素将采用图像本身的大小。您还可以在包装元素中包含覆盖元素。

将 position: relative; 应用于包装元素并将 position: absolute; 应用于覆盖元素。包装元素上的相对定位可防止绝对定位元素位于恰好与我们的图像大小相同的包装元素之外。我们现在有一个 “视口(viewport)” 用于覆盖元素，它与图像大小相同并位于图像上方。

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <p>
                Lorem Ipsum
            </p>
        </div>
        <div class="col-md-6">
            <span class="overlay-wrapper">
                <img class="img-responsive" src="http://maxcdn.thedesigninspiration.com/wp-content/uploads/2012/01/Just-A-Cat-Playing-The-Violin-l.jpg" alt="Cat"/>
                <div class="text-overlay">
                    Caption
                </div>
            </span>
        </div>
    </div>
</div>

.overlay-wrapper {
    position: relative;
    display: inline-block;
}
.text-overlay {
    position: absolute;
    width: 80%;
    background: rgba( 0, 0, 0, .5 );
    top: 75%;
    left: 10%;
    color: #fff;
    text-align: center;
}
@media( min-width: 300px ) {
    .text-overlay {
        padding: 1em 0;
        top: 65%;
    }
}
@media( min-width: 550px ) {
    .text-overlay {
        padding: 2em 0;
    }
}

http://jsfiddle.net/o2cjkyow/

我在我的示例中包含了一些媒体查询，因此您可以看到有关如何在不同视口(viewport)大小下调整各种属性以进行微调的演示。

这是我的 JSFiddle from the comments .