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

Bootstrap是一种流行的前端框架，提供了一些易于使用的工具以及预定义的样式来构建漂亮的Web应用程序。本文将介绍如何在Bootstrap中的图像上添加文本。

方法

使用Bootstrap的把文本和图像组合在一起的技术有两种方法：

方法1：使用图像作为背景并在上方添加文本

<div style="background-image: url('path-to-image'); height: 200px;">
  <div style="padding: 20px;">
    <h2>这是标题</h2>
    <p>这是一些文本</p>
  </div>
</div>

在此代码片段中，我们将图像设置为背景，然后使用<div>元素在其上添加文本。使用内联样式设置了图像路径和元素的高度。使用内联样式填充添加文本的<div>，并添加标题和段落文本。

方法2：使用响应式类

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img src="path-to-image" class="img-responsive" alt="图像">
      <div class="caption">
        <h2>这是标题</h2>
        <p>这是一些文本</p>
      </div>
    </div>
  </div>
</div>

在这个片段中，我们使用Bootstrap的响应式类来设置图像的大小和对齐方式，并使用水平对齐类（text-center）和<div>元素来将标题和文本中心对齐。请注意，我们还为图像添加了替代文本，这在重要性和可访问性方面都很重要。

结论

在Bootstrap中添加文本到图像可能有多种方式，具体取决于你想要达到的效果。以上介绍的两种方法是最常见的方式之一，你可以按照自己的需求自由地调整样式和内容。