html - 使用 HTML <img> 标签作为背景图片而不是 CSS background-image 属性？

Question

我需要使用 html <img>标记为 <div> 的背景图片.然后我将放置一个 <p>关于这一点的内容。我已经试过了，但似乎无法让它们正确显示。我使用了相对位置，负值的边距。

如有任何建议或指出正确的方向，我们将不胜感激。

<div>

  <img src="http://www.shiaupload.ir/images/77810787432153420049.png" />

  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
  </p>

</div>

Answer 1

为了几乎完美地复制用于背景图像的功能，我们必须考虑 img 的功能，包括:

• 它没有任何指针事件。
• 它至少呈现在 div 下一层。

结果会是这样的:

div {
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

img {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

p {
  padding: 25px;
}

<div>
  <img src="http://via.placeholder.com/720x480/ddd/007" />
  <p>
    Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown
    printer took a galley of type and scrambled it to make a type
    specimen book
  </p>
</div>

您可以根据需要修改宽度和高度。