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

【问题标题】：How do I set an image background, using the <img> tag rather than CSS?如何使用 <img> 标签而不是 CSS 设置图像背景？
【发布时间】：2017-07-28 11:25:23
【问题描述】：

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

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

我怎样才能最好地做到这一点？

【问题讨论】：

标签： html css wordpress image

【解决方案1】：

#img-as-background {
  position: relative;
  overflow: hidden;
}
#img-as-background .container {
  height: 500px;
  padding: 20px;
}

#img-as-background img {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: -1;
}

<div id="img-as-background">
  <img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" alt="" />
 <div class="container">
  Overflow text Overflow text Overflow text Overflow text Overflow text Overflow text Overflow text 
 </div> 
</div>

【讨论】：

感谢您对 Dao Minh Hat 的洞察。

【解决方案2】：

只需将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>

【讨论】：

谢谢。您的代码完全符合我的要求。