如何在引导程序中的图像上添加文本

Question

我是引导程序新手，正在制作一个简单的响应式网页设计。我已经为引导容器提供了图像，现在我想在图像上添加文本，这样我就可以在该容器上添加更多文本和图像。我尝试谷歌但没有找到确切的答案。请帮忙

<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

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

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

演示