唯一能精准控制遮罩且不波及文字和交互的方案是用linear-gradient()伪装成背景图，与url()并列写在background-image中并用逗号分隔，渐变在前、图片在后。
不能直接给 background-image 设透明度，必须用 linear-gradient() 伪装成一层背景图，和图片并列写在 background-image 里——这是唯一能精准控制遮罩、又不波及文字和交互的方案。
background-image 里怎么同时写渐变和图片
语法上用逗号分隔，顺序决定上下层：渐变在前，图片在后，渐变才能盖住图片；漏掉逗号或顺序颠倒，遮罩就失效。
-
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./bg.jpg);✅ 遮罩生效 -
background-image: url(./bg.jpg), linear-gradient(...);❌ 渐变被压在底下，不可见 -
background-image: linear-gradient(...) url(./bg.jpg);❌ 缺少逗号，整条声明被浏览器忽略
为什么不用 background-color: rgba() 或 opacity
background-color: rgba() 是背景色，不是背景图，无法和 url() 叠加；opacity 会把整个元素（含文字、按钮）一起变淡，导致可读性下降、点击热区异常。
-
background: rgba(0,0,0,0.5), url(bg.jpg)→ 浏览器直接忽略rgba()部分，只渲染图片 -
opacity: 0.5→ 文字变灰、按钮响应变弱，尤其在安卓 WebView 中可能触发点击穿透或失焦 - 真正安全的只有把遮罩“包装”成图像层：
linear-gradient(rgba(), rgba())
遮罩颜色发灰、不均匀、边缘模糊？检查这几个点
这些现象几乎都源于渐变写法或容器设置不当，不是浏览器兼容问题。
立即学习“前端免费学习笔记（深入）”；
- 用了
transparent当起点，比如linear-gradient(black, transparent)→ black 完全不透明，开头就挡住内容；应统一用带 alpha 的值，如rgba(0,0,0,0.4)到rgba(0,0,0,0.4) - 没设
background-size和background-position→ 图片缩放后，渐变层仍按默认拉伸，造成错位或模糊 - 容器高度塌陷（比如没设
height或min-height）→ 渐变无处可绘，看起来像没生效 - 写了两个相同色标但方向不对，例如
linear-gradient(to right, rgba(0,0,0,0.4), rgba(0,0,0,0.4))没问题，但若写成to bottom而图片重点在中间，就会上下过暗、中间过亮
移动端和 Safari 特别要注意什么
老版 Safari 对 linear-gradient() 解析较严格，某些写法会降级或闪烁；伪元素方案虽灵活，但在部分安卓 WebView 中 hover 动画易卡顿。
- 避免用十六进制带 alpha（如
#0008），Safari 不识别，会当不透明黑处理 - 如果用伪元素（
::after）做遮罩，加transform: translateZ(0)强制 GPU 加速，防低端机跳帧 - 多背景方案（
linear-gradient+url()）在 iOS 14+ 和 Android 8+ 全面支持，比伪元素更稳，也无需额外 DOM
真正容易被忽略的是：渐变遮罩是“死”的——它不随图片加载状态变化。图片加载失败时，遮罩照常铺满，可能变成一片突兀的灰块。没有 :has() 支持的环境里，只能靠 JS 监听 img.onerror 切换 class 来兜底。
