CSS设置background image透明度且不影响页面内容的实现方法

直接给元素设置opacity属性会导致元素内所有子内容都继承透明度，达不到只调整背景图透明度的效果，可通过以下三种方案实现需求：

• 方案1：background属性叠加半透明渐变层（无需额外DOM）
  利用CSS多重背景的特性，在背景图上层叠一层和页面背景色一致的半透明渐变层，模拟背景图透明效果，兼容性极佳。
  示例代码：

  .target-element {
    /* rgba最后一位0~1之间的数值为透明度，数值越小背景图越透明 */
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url("./你的背景图路径.jpg");
    background-size: cover;
    background-position: center;
  }
  

  如果页面背景不是白色，把rgba的前三个值改成对应背景色的RGB值即可。
• 方案2：伪元素单独承载背景图（灵活性最高）
  将背景图放在元素的伪元素上，单独给伪元素设置透明度，伪元素层级低于元素内容，不会对内部内容产生任何影响。
  示例代码：

  .target-element {
    position: relative;
    z-index: 0;
  }
  .target-element::before {
    content: "";
    position: absolute;
    inset: 0; /* 等价于top:0;left:0;right:0;bottom:0; */
    background: url("./你的背景图路径.jpg") center/cover no-repeat;
    opacity: 0.3; /* 直接调整该值控制背景图透明度 */
    z-index: -1; /* 确保伪元素在内容下方 */
  }
  

  该方案还支持对背景图单独设置滤镜、缩放、位移等效果，不会干扰元素本身的样式。
• 方案3：backdrop-filter实现（适用上层元素半透场景）
  如果你需要设置透明度的是上层元素的背景，下层是父容器/页面的公共背景图，可使用该属性实现更丰富的视觉效果。
  示例代码：

  .target-element {
    background-color: rgba(255, 255, 255, 0.5);
    /* 可选：添加背景模糊效果 */
    backdrop-filter: blur(4px);
  }
  

  注意该属性的兼容性略低于前两种方案，需要兼容低版本浏览器的场景不推荐使用。

内容的提问来源于stack exchange，提问作者Sun--jay