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

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>

这是我想要的图像 -

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>

演示

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

top:xyz%

添加到 css 样式表中的 .carousel-caption 类，以使其垂直对齐中间。）

Answer 3

在 bootstrap 5.x 中，在

<div class="card-img-overlay"> Some text here </div>

标签后添加

<img>

。

例如来自 Bootstrap 文档。 引导卡-img-覆盖

<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>