Twitter bootstrap 如何在引导中在图像上添加文本

我是bootstrap的noob，正在做一个简单的响应性网页设计。我已经给了引导容器图像，现在我想在图像上添加文本，这样我就可以在该容器上添加更多的文本和图像。我在谷歌上试过，但没有找到确切的答案。请帮忙

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8 col-centered">
            <div class="maintxt">
                <img src="background.png" class="img-responsive">
            </div>
        </div>
    </div>
</div>

---

这是我想要的图像-

我倾向于将图像放在适当的位置作为背景：

.maintxt {
    background-image: url(images/background.png);
    background-size: cover;
}

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8 col-centered">
            <div class="maintxt">
                My great text.
            </div>
        </div>
    </div>
</div>

.maintxt{
背景图片：url（images/background.png）；
背景尺寸：封面；
}
我的好文章。

如果不起作用，则需要使用相对和绝对定位：

.maintxt {position: relative;}
.maintxt > img, .overlay-text {position: absolute;}

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8 col-centered">
            <div class="maintxt">
                <img src="background.png" class="img-responsive">
                <span class="overlay-text">My super text.</span>
            </div>
        </div>
    </div>
</div>

.maintxt{position:relative；}
.maintxt>img，.overlay文本{位置：绝对；}
我的超级文本。

---

我可以在您的

标签后添加

一些文本
您的文本将显示在图像上

这个想法是，旋转木马标题使用绝对定位，以便将
标记从正常HTML流中取出，然后使用z-index:10将
标记显示在父元素上。将文本放置在图像上的所有繁重工作都由
class=“carousel caption”
负责。（现在，如果您希望将文本完全对齐在中间，请根据需要添加自定义
顶部：xyz%
）


长话短说。将
class=carousel caption
添加到HTML标记中，该标记包含需要放置在图像上方的文本！。（然后，如果您想在css样式表中将自定义css
top:xyz%
添加到您的.carousel标题类中，使其在中间垂直对齐。）
Isherwood的答案非常好。顺便说一句，col-xs-12不是必需的。使用col-X-12是非常罕见的，它将自动在您使用的列类下方为全宽，因此在col-sm下为全宽。Col-X-12用于嵌套或介于Col-sm-6 Col-md-12和Col-lg-8之间