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

您可以根據需要修改寬度和高度。