在 <img> 本身上添加背景图像？答案

【问题标题】：Adding a background-image on an <img> itself?在 <img> 本身上添加背景图像？
【发布时间】：2021-05-22 13:01:31
【问题描述】：

是否可以在<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;
}

&lt;img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg"&gt;

【问题讨论】：

您希望img 标签上的src 和css bg 图片会发生什么？
预期的行为是什么？
@Luke_ 客户询问是否可以在某些图像（产品图像）的右下角获得徽标
您可以使用相对定位，但您应该明确使用 2 个单独的图像元素并将它们放在彼此的顶部
最好将图像（或至少是背面图像）应用为结构元素的背景。

标签： html css image background-image

【解决方案1】：

是的，这是可能的 - 但是 img 需要一些透明度才能让您看到背景图像。

这个 sn-p 与您的相同，但删除了实际的 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;
}

&lt;img src="" width=200 height=200&gt;

【讨论】：

【解决方案2】：

使用填充并在此处添加图像：

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;
}

&lt;img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg"&gt;

考虑多个背景并仅保留填充区域，如下所示：

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;
}

&lt;img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg"&gt;

【讨论】：

谢谢，但我现在看不到自然图像了
@Panic 也添加了另一个想法