如何在 Bootstrap 3.1 中的图像上显示文本

Question

我想添加显示在图像上的文本。

基本上，这就是我的代码的样子：

<div class="ek-background">
<div class="row">
<section id="container">
    <div class="container col-sm-4 col-sm-offset-2">
    <div class="pull-right">
        <h1>TITLE HERE</h1>
            <h2>Let us build your preview for free</h2>
    </div>  
        <img src="img/img/flow-1.png" class="align-center img-responsive">
            <div class="col">
                <div class="col-sm-4">
                    <p>this is a test</p>
    </div>
</div>
</div>

我无法将“这是一个测试”添加到图像的建议部分。

我想使用 bootstrap.min.css 的参数来保持一切一致。另外，由于这将是一个响应式设计网站，我希望文本能够响应图像，这样它就不会失去位置

如果有人能帮忙，那就太好了:)

Answer 1

我可以建议一种解决问题的方法：您可以将轮播与单个项目一起使用，因为您可以通过标题在轮播图像上插入文本：

<div id="mycarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
        <img src="img/yourimage.png" alt="" class="img-responsive">
           <div class="carousel-caption">
           Insert your text here !
           </div>
        </div>
    </div>
</div>

Answer 2

您需要粘贴额外的 css 以让我们了解您正在处理的确切内容，但无论如何这是我的 2 美分：

1) 首先将图像和文本放在同时包含它们的东西中：

<div class="imageAndText">
    <img src="img/img/flow-1.png" class="align-center img-responsive">
    <div class="col">
        <div class="col-sm-4">
            <p>this is a test</p>
        </div>
    </div>
</div>

（小心，你的原始代码有一个额外的）

2）添加绝对定位+z-index：

.imageAndText {position: relative;} 
.imageAndText .col {position: absolute; z-index: 1; top: 0; left: 0;}

这是一个 jsFiddle 说明：http://jsfiddle.net/sX982/

Answer 3

我认为使用引导类是不可能的。您可以通过将thumbnail 添加到图像并将thumbnail_legend 添加到 next div 来执行类似的操作。

.thumbnail_legend {
    background: none repeat scroll 0 0 #FFFFFF;
    opacity: 0.5;
    top:0;
    left:0;
    position: absolute;
}

.thumbnail {
    position:relative;
}

来自：Bootstrap 3: Text overlay on image