使用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下方至少呈现一层。

结果将是this jsfiddle：

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

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

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