有没有一种方法可以在引导程序中在图片上显示html文本？

这种方法的总体思路是将图像包装在一个包含元素中，该元素将占据图像本身的大小。您还可以将overlay元素包括在wrapper元素内。

应用于position: relative;wrapper元素，并应用于position: absolute;overlay元素。包装元素上的相对位置可防止将绝对定位的元素放置在与我们的图像大小相同的包装元素之外。现在，我们为叠加层元素提供了一个“视口”，该视口与图像的尺寸相同，并位于图像上方。

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

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

这是我来自评论的JSFiddle。