使用 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>

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