使用伪元素:before为img添加背景图失败，求替代实现方案

img 属于替换元素，这类元素的内容由外部资源（如图片文件）提供，浏览器不会在其内部生成 :before 或 :after 伪元素，所以你之前的方法无法生效。下面是几种可行的替代方案：

解决方案一：给img添加容器，利用容器的伪元素实现 #

修改HTML结构，给img套一个容器：

<div class="hero-sub-2">
  <div class="img-container">
    <img src="你的原图片地址" alt="描述文字">
  </div>
</div>

对应的CSS代码：

.img-container {
  position: relative;
  width: 166%;
  height: 430px;
  border-radius: 20px;
  left: 43px;
  top: 50px;
  overflow: hidden;
}
.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸 */
}
.img-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/img/360_F_297885365_QNMAlCRXZSHMd0MX5v9QJcP2KhHLLYDc.jpeg');
  background-size: cover;
  z-index: -1; /* 将背景图放到img下方 */
}

解决方案二：给父元素设置背景，调整img透明度 #

如果希望背景图与原img叠加，可以直接给.hero-sub-2设置背景，再调整img的透明度：

.hero-sub-2 {
  position: relative;
  width: 166%;
  height: 430px;
  border-radius: 20px;
  left: 43px;
  top: 50px;
  background-image: url('/img/360_F_297885365_QNMAlCRXZSHMd0MX5v9QJcP2KhHLLYDc.jpeg');
  background-size: cover;
  overflow: hidden;
}
.hero-sub-2 img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  opacity: 0.7; /* 调整透明度，让背景图可见 */
  object-fit: cover;
}

解决方案三：用CSS Grid层叠元素（无需修改HTML） #

利用Grid布局让img和父元素的伪元素占据同一区域，实现背景图效果：

.hero-sub-2 {
  display: grid;
  width: 166%;
  height: 430px;
  border-radius: 20px;
  left: 43px;
  top: 50px;
  overflow: hidden;
}
.hero-sub-2 img,
.hero-sub-2::before {
  grid-area: 1 / 1; /* 两者共用同一网格位置 */
  width: 100%;
  height: 100%;
}
.hero-sub-2::before {
  content: "";
  background-image: url('/img/360_F_297885365_QNMAlCRXZSHMd0MX5v9QJcP2KhHLLYDc.jpeg');
  background-size: cover;
  z-index: -1; /* 放到img后方 */
}
.hero-sub-2 img {
  object-fit: cover;
}

内容的提问来源于stack exchange，提问作者dev.muhammad