在Bootstrap 3中将文本添加到图像上的正确方法

<div class="image-container">
  <img src="image.jpg" alt="Image">
  <div class="text-overlay">
    <h3>文本标题</h3>
    <p>文本内容</p>
  </div>
</div>

.image-container {
  position: relative;
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
}

<div class="thumbnail">
  <img src="image.jpg" alt="Image">
  <div class="caption">
    <h3>文本标题</h3>
    <p>文本内容</p>
  </div>
</div>