html - CSS 如何在图片底部添加文字说明？

Question

我对 css 很陌生，我想在我的图片底部添加一个文本标题，如下所示:

我在 3 个不同的 bootstrap 列中有 3 个图像。

.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/但是当我调整窗口大小时，文本标题不再适合。

实现这种效果的最佳方法是什么？

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>