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

Question

是否可以在 <img> 标签上添加 background-image？ 我现在无法围绕它创建 <div>（由于其他限制）。我想知道仅在 <img> 标签上是否可行。谢谢。

img {
  width: 500px;
  background-image: url('https://Whosebug.design/assets/img/logos/so/logo-Whosebug.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 需要一定的透明度才能让您看到背景图像。

此代码段与您的代码段相同，但删除了实际的 img src 并在 img 元素上设置了宽度和高度，因此它具有一些尺寸，因为在这种情况下它不是从 img 本身中提取它们.您可以看到从下方出现的 Whosebug 徽标。

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

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

Answer 2

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

img {
  width: 300px;
  padding:0 0 50px 0;
  background: url('https://Whosebug.design/assets/img/logos/so/logo-Whosebug.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://Whosebug.design/assets/img/logos/so/logo-Whosebug.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">

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

Adding a background-image on an <img> itself?

html

css

image

background-image