Question

是否可以在 background-image 标签上添加 <img>？ 我暂时无法在它周围创建 <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

使用填充并在那里添加图像：

Iterator

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

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>

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

2 个答案: