是否可直接在<img>标签上添加background-image背景图片？

当然可以！不过有个容易踩的坑得先提一句：<img>是替换元素，它通过src加载的图片默认处于元素的「内容层」，而background-image是在「背景层」——简单说就是，src的图会直接盖在背景图上面，你之前写的代码虽然加了背景，但大概率被原图片挡住，看不到效果。

结合你不能在外层加<div>的限制，给你几个实用的解决方案：

方案1：用透明占位图当src #

把src换成一张完全透明的小图（用base64编码的，不用额外发请求），这样背景图就能完全显示出来：

img {
  width: 500px;
  height: 300px; /* 最好指定高度，避免元素塌陷 */
  background-image: url('你的背景图地址');
  background-repeat: no-repeat;
  background-size: contain; /* 可选，按需调整背景图的缩放方式 */
}

<!-- 这是一张1x1的透明GIF，不会显示任何内容 -->
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="展示背景图">

方案2：让原src图片带透明区域 #

如果你的src图片本身可以修改（比如是PNG格式），可以把需要显示背景图的区域做成透明，这样背景图就能透过透明部分露出来。比如原图片是一张带logo的图，把logo以外的区域设为透明，背景图就能在空白处显示。

方案3：把src图片移出可视区域 #

用CSS把src里的图片移到元素外面，让它不在可视范围内，这样就不会挡住背景图了：

img {
  width: 500px;
  height: 300px;
  background-image: url('你的背景图地址');
  background-repeat: no-repeat;
  /* 把原图片移到可视区域外，既不显示，也不会触发加载失败的占位符 */
  object-position: -9999px -9999px;
}

<img src="你原来的图片地址" alt="展示背景图">

⚠️ 注意：如果把src设为空字符串或者无效地址，有些浏览器会显示「图片加载失败」的默认占位符，反而会破坏效果，所以优先用方案1的透明base64图来规避这个问题。

内容的提问来源于stack exchange，提问作者Zanic L3