background-color: rgba() 是唯一可靠方案，opacity 会导致子元素发虚、点击迟钝、iOS WebView 事件捕获降级；position: fixed + inset: 0 才算真·全屏覆盖；z-index 失效常因父容器创建层叠上下文；pointer-events: auto 必须显式声明。
background-color: rgba() 是唯一可靠方案，opacity 会导致子元素发虚、点击迟钝、iOS WebView 事件捕获降级——这不是兼容性问题，而是渲染模型本身的限制。
为什么不能用 opacity 实现遮罩层
opacity 作用于整个元素及其所有后代节点，包括文字、按钮、图标。实际项目中常见现象包括：
- 遮罩层下的按钮文字边缘模糊、抗锯齿异常
- 点击响应延迟明显，尤其在低端安卓机或 iOS WebView 中
- 遮罩层“盖不住”绝对定位按钮，不是
z-index不够，而是父容器因opacity: 0.99创建了新层叠上下文 - 动画过程中
opacity触发重绘，帧率不稳
真正只影响背景、不影响内容交互的，只有 background-color: rgba(0, 0, 0, 0.6) 这类写法。
position: fixed + inset: 0 才算真·全屏覆盖
用 position: absolute 或 width: 100vw; height: 100vh 都不可靠：
立即学习“前端免费学习笔记（深入）”；
-
absolute在滚动时会露底，因为不随视口固定 -
100vh在 iOS Safari 中受地址栏缩放影响，常漏出底部空白 -
inset: 0是top: 0; right: 0; bottom: 0; left: 0的现代等价写法，兼容性更稳（Chrome 89+、Firefox 85+、Safari 14.1+）
若用伪元素（如 ::before），必须显式写 content: ""，否则不渲染。
z-index 失效？先查层叠上下文是否被意外创建
遮罩层 z-index: 9999 却盖不住按钮，大概率不是数值不够大，而是它的父容器触发了层叠上下文。常见诱因：
- 父元素设置了
opacity（哪怕只是0.99） - 父元素有
transform、filter或will-change - 父元素为
position: relative且z-index不为auto
解决办法：把遮罩直接挂到 <body> 下；或确认其直接父容器没上述任一属性；别依赖 DevTools 里看到的 z-index 数值，用 Layers 面板看真实层级结构。
pointer-events: auto 必须显式声明
遮罩写了 rgba()、fixed、z-index，但点击仍穿透？八成是重置样式表把默认的 pointer-events: auto 改成了 none。
- 务必显式写
pointer-events: auto（拦截点击） - 确保遮罩本身有尺寸：
inset: 0或明确宽高，空盒子无法响应事件 - 别和
opacity: 0共存：看不见却点得到，用户会困惑 - alpha 值别贪小，
0.01和0几乎没区别；常用安全区间是0.4～0.8；移动端若边缘发虚，加backface-visibility: hidden强制硬件加速通常能缓解
最易被忽略的是：background: rgba(0, 0, 0, 0.5) transparent 这种写法中，transparent 会覆盖前面的 rgba()；正确写法只有 background-color: rgba(0, 0, 0, 0.5)。
