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

时间:2014-03-02 00:03:18

标签: html css3 twitter-bootstrap

我想添加显示在图片上的文字。

基本上,这就是我的代码:

<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的参数来保持一致。此外,由于这将是一个响应式设计网站,我希望文本能够对图像做出响应,这样它就不会失去它的位置

如果有人可以提供帮助,那就太好了:)

3 个答案:

答案 0 :(得分:50)

我可以建议一种解决问题的方法:你可以使用带有单个项目的旋转木马,因为你可以通过字幕在旋转木马图像上插入文字:

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

答案 1 :(得分:15)

你需要粘贴额外的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/

答案 2 :(得分:0)

我不认为使用bootstrap类是可行的。您可以通过向图片添加thumbnail并向{em>下一个 div添加thumbnail_legend来执行此类操作。

.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