如何在图片底部添加文字说明？（CSS实现）

Question

我对CSS非常陌生，我正在尝试在我的图片底部添加文本标题，就像这样：

我有3张图片，分别在3个不同的Bootstrap列中。

.img-preview {
  display: block;
  margin: 0 auto;
  object-fit: cover;
  min-height: 300px;
  max-width: 350px;
}
.img-container {
  width: 100%;
  height: auto;
  padding: 0;
  background-position: center top;
}

<div class="row">
  <div class="col-md-10 col-md-offset-1">

    <div class="col-md-4 col-sm-6">
      <img class="img-container img-preview" src="../img/Referenzen_Stimmungsbild.jpg">
      <h3><span>Maler<br />und<br />Tapezierarbeiten</span></h3>
    </div>

    <div class="col-md-4 col-sm-6">
      <img class="img-container img-preview" src="../img/Referenzen_Stimmungsbild.jpg">
    </div>


    <div class="col-md-4 col-sm-6">
      <img class="img-container img-preview" src="../img/Referenzen_Stimmungsbild.jpg">
    </div>
  </div>

我尝试了很多可能的解决方案，但没有什么真正有效的。例如，尝试了https://css-tricks.com/text-blocks-over-image/，但当我调整窗口大小时，文本标题就不再适合了。

最好的方法是什么？

- user5582011

---

在这种情况下，您的包装器 div 需要是相对定位的，而您的 h3 应该是绝对定位的。然后，您可以为 h3 指定底部和左侧坐标。 - lharby

然而，在同一个包装器中显示不同长度的文本可能会成为一个问题，这取决于文本的长度。你可能想通过使用固定高度和溢出隐藏来限制它。 - lharby

另外，background-position: center top; 不适用于内联图像元素（仅适用于背景图像）。据我所知。 - lharby

你可以使用 background-image 并将 img-container、img-preview 类应用于父级 div，而不是在其中使用带有绝对位置 left: 0; bottom: 0; 的 img，标题将按照您想要的方式显示。 - Bob Dust

非常感谢。即使有点晚了。 - zahra_shokri

Answer 1

你可以简单地使用position:absolute，尝试使用这个答案。

.relative_box {
    position:relative;
    width:400px;
    float:left;
}
.relative_box img {
    width:100%;
}
.relative_box h3 {
    position:absolute;
    bottom:0;
    left:0;
    background:#000;
    color:#fff;
    width:100%;
    margin:0;
    padding:10px
}

<div class="relative_box">
    <img src="https://www.wired.com/wp-content/uploads/2015/09/google-logo.jpg" alt="" />
    <h3><span>Maler<br />und<br />Tapezierarbeiten</span></h3>
</div>

- Jishnu V S

Answer 2

您可以使用CSS定位来实现。但是您需要稍微更改一下结构。请查看下面的代码片段：

.img-holder {
  min-height: 300px;
  max-width: 350px;
  margin: 0 auto;
  position: relative;
}

.img-holder h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  background: rgba(65, 55, 91, 0.8);
  color: white;
  bottom: 0;
  left: 0;
  width: 80%;
  height: 30%;
  margin: 0;
  padding: 10px;
  text-align: center;
}

.img-preview {
  display: block;
  margin: 0 auto;
  object-fit: cover;
  min-height: 300px;
  max-width: 350px;
}

.img-container{
  width: 100%;
  height: auto;
  padding: 0;
  background-position: center top;
}

<div class="row">
<div class="col-md-10 col-md-offset-1">

    <div class="col-md-4 col-sm-6"> 
      <div class="img-holder">
            <img class="img-container img-preview" src="http://placehold.it/200x200">
            <h3><span>Maler<br />und<br />Tapezierarbeiten</span></h3>
      </div>
    </div>
  
  <div class="col-md-4 col-sm-6"> 
      <div class="img-holder">
            <img class="img-container img-preview" src="http://placehold.it/200x200">
            <h3><span>Maler<br />und</span></h3>
      </div>
    </div>

  </div>

希望这有所帮助！

- Saurav Rastogi

---

嘿，谢谢你的回答，这正是我想要的！你知道我怎么才能在每张图片上保持文本（紫色背景）的背景大小相同吗？因为有时只有一行文本。 - user5582011

@Insane 如果您在 .img-holder h3 中传递 height 值，它将自动调整其高度，并且每个图像的 width 将相同。 - Saurav Rastogi

我将height: 20%添加到.img-holder h3中，但现在如何在紫色框中垂直居中文本？ - user5582011

@Insane 在紫色背景内部将 .img-holder h3 上使用 text-align: center CSS 规则以实现文本居中对齐。 - Saurav Rastogi

编辑了我的评论，我指的是垂直方向。抱歉。 - user5582011

@Insane，我更新了我的答案，请看一下。 - Saurav Rastogi