最稳妥做法是用绝对定位的::before伪元素叠加半透明遮罩，父容器需设position: relative且::before设z-index: -1，确保遮罩在背景图之上、内容之下。
用 ::before 伪元素叠加半透明遮罩最稳妥
直接改 background-image 的亮度不可控，浏览器也不支持。真正可靠的做法是用一个绝对定位的 ::before 伪元素盖在背景上，填充黑色+透明度。这样既不影响内容层，又能统一压暗整张图。
常见错误是把遮罩写成子元素（比如加个 ），结果要额外管理层级、尺寸和响应式；而伪元素天然绑定父容器，CSS 更干净。
- 父容器必须设
position: relative，否则::before会相对于 body 定位 -
z-index: -1是关键：让它在内容之下，但仍在背景图之上（因为背景图属于父容器自身） - 遮罩颜色不一定要纯黑，
rgba(0, 0, 0, 0.4)比hsla(0,0%,0%,0.4)兼容性更好
.hero {
position: relative;
background-image: url("bg.jpg");
background-size: cover;
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: -1;
}
用 background-blend-mode 叠加纯色时要注意兼容性
如果只想用纯 CSS 不加伪元素，background-blend-mode 是另一个选择：把图片和一层纯色背景叠在一起，再用混合模式“变暗”。但它有明显限制——IE 完全不支持，iOS Safari 12.2 之前也有 bug。
更实际的问题是：它要求所有背景层都定义在同一个 background 属性里，无法单独控制遮罩透明度，只能靠颜色明度和 blend mode 类型微调效果。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
multiply或darken，screen是提亮，别选错 - 颜色层必须写在图片层前面，顺序影响混合结果
- 不能响应式调整遮罩强度，改
opacity会同时影响图片和颜色层
.hero {
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("bg.jpg");
background-blend-mode: multiply;
background-size: cover;
}
filter: brightness() 会连文字一起变暗，慎用
有人试过给整个容器加 filter: brightness(0.7)，看起来简单，但副作用极强：里面所有内容（文字、图标、子元素）都会同步变暗，甚至可能触发重绘性能问题。
除非你明确需要全局降亮（比如夜间模式整体 dim），否则这不是“让背景图片变暗”，而是“让整个区块变灰”。而且 brightness() 在旧版 Safari 中表现不稳定，有些机型会直接失效。
- 无法单独作用于背景图，滤镜永远作用于渲染后的整层像素
- 与
transform或position: fixed同时使用时，可能触发硬件加速异常 - 若容器内有
will-change或动画，叠加 filter 易引发闪烁
响应式场景下，遮罩必须随图片缩放重绘
背景图用 background-size: cover 或 contain 时，伪元素遮罩默认也会拉伸覆盖，这点没问题。但如果你手动设置了 background-position（比如居右、偏下），遮罩不会自动对齐——它只是填满容器，不管图片实际显示区域在哪。
真正棘手的是视网膜屏或缩放 125% 的 Windows 系统：CSS 像素和设备像素比不一致，可能导致遮罩边缘出现 1px 锯齿或错位。这时得靠 transform: translateZ(0) 强制 GPU 渲染，或者补一句 backface-visibility: hidden。
- 避免用
width: 100vw+height: 100vh做遮罩，滚动条宽度会导致水平溢出 - 如果背景图是渐变 + 图片组合，遮罩层需确保
z-index在渐变之上、图片之下（但伪元素做不到这点，此时必须换方案） - SSR 页面首次渲染时，若图片加载慢，遮罩会先单独显示几帧，可加
background-image: none初始态防闪
z-index: -1，或者忘了父容器加 position: relative，结果遮罩飘到页面最上层盖住按钮。 
