Question

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

这是图像，我想要的 - http://i.imgur.com/FAPXpFL.jpg

Answer 1

我倾向于将图像作为背景放置：

.maintext {
    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 {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 workds.</span>
            </div>
        </div>
    </div>
</div>

Demo

Answer 2

我可以说在您的<img>标记后添加<p class="carousel-caption">Some text here </p> 您的文字将出现在图像上！

想法是轮播字幕使用绝对定位，因此<p>标签会从常规HTML流中删除，然后使用z-index：10来获取<p>标签显示在父元素上方！。 class="carousel-caption"负责将文本放在图像上的所有繁重工作。（现在，如果您希望使文本在中心完美对齐，请根据需要添加自定义top:xyz%）

长话短说。将class=carousel-caption添加到HTML标记中，该标记包含需要定位在图像上方的文本！（然后，如果您希望在css样式表的.carousel-caption类中添加自定义css top:xyz%，它在中间垂直对齐。）

如何在bootstrap中的图像上添加文本

2 个答案: