在一個背景圖像上添加一個<img>本身？

Question

是否可以在<img>標簽上添加background-image ？ 我現在不能在它周圍創建一個<div> （由於其他限制）。 我想知道是否可以僅在<img>標簽上使用。 謝謝。

 img { width: 500px; background-image: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png'); background-repeat: no-repeat; z-index:100; }

 <img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg">

Answer 1

使用填充並在那里添加圖像：

 img { width: 300px; padding:0 0 50px 0; background: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png') bottom right/auto 50px; background-repeat: no-repeat; }

 <img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg">

通過考慮多個背景並僅保留填充區域，如下所示：

 img { width: 0; height:0; padding:300px 500px 0 0; background: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png') bottom right/auto 50px, url(https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg) center/cover; background-repeat: no-repeat; }

 <img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg">

Answer 2

是的，這是可能的 - 但 img 需要一些透明度才能讓您看到背景圖像。

此片段與您的相同，但刪除了實際的 img src 並在 img 元素上放置了寬度和高度，因此它具有一些尺寸，因為在這種情況下它不是從 img 本身中提取它們的。 您可以看到 StackOverflow 徽標從下方出現。

 img { width: 500px; background-image: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png'); background-repeat: no-repeat; z-index:100; }

 <img src="" width=200 height=200>