html - 如何使用 <img> 标签而不是 CSS 设置图像背景？

Question

我创建了 4 列。每列包含一个图像，我想在每个图像上放置文本。

为此，我显然需要将图像设置为背景。我知道这可以通过 CSS 实现(这是我目前正在做的)，但我想将图像作为背景放置在我的 HTML 文件中。原因;这样我就可以为 SEO 目的输入相关的“alt”文本。

我怎样才能最好地实现这一点？

Answer 1

只需将 img 放在 col 容器中，将该元素设置为 position: relative; 然后使用 absolute 定位将文本放在上面图片。

* {margin:0;}
.col {
  float: left;
  width: 25%;
  position: relative;
}
img {
  display: block;
  width: 100%;
}
.overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: black;
  color: white;
  padding: 1em;
}

<div class="col">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="overlay">
    <h2>text</h2>
  </div>
</div>
<div class="col">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="overlay">
    <h2>text</h2>
  </div>
</div>
<div class="col">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="overlay">
    <h2>text</h2>
  </div>
</div>
<div class="col">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="overlay">
    <h2>text</h2>
  </div>
</div>