唯一正解是background-color: rgba()，因opacity会导致子元素发虚、点击迟钝、事件捕获降级；必须配合position: fixed + inset: 0、显式pointer-events: auto及合理alpha值（0.4～0.8）确保全屏覆盖与交互正常。
background-color: rgba() 是唯一正解
用 opacity 实现遮罩层，等于主动放弃可用性：按钮文字发虚、点击响应迟钝、iOS WebView 事件捕获降级。真正能稳定工作的，只有 background-color: rgba(0, 0, 0, 0.7) 这类写法——它只让背景变半透，文字、图标、按钮保持原样可读可点。
常见错误包括：
– 写成 background: rgba(0, 0, 0, 0.5) transparent（transparent 会覆盖前值）
– 混用 background 和 background-color，后者被前者静默忽略
– alpha 写成 50 或 50%（必须是 0.5）
position: fixed + inset: 0 才算全屏
用 position: absolute 写遮罩，一滚动就露底；用 width: 100vw; height: 100vh，在 iOS Safari 里常因地址栏缩放漏出底部空白。唯一可靠方案是：
position: fixed;<br>inset: 0;
这等价于 top: 0; right: 0; bottom: 0; left: 0，且兼容性更稳。若用伪元素（如 ::before），必须显式写 content: ""，否则不渲染。
z-index 失效？先查层叠上下文
遮罩盖不住绝对定位按钮，大概率不是 z-index 数值不够大，而是它的父容器悄悄创建了新层叠上下文。触发条件包括：
– 父元素设了 opacity（哪怕 opacity: 0.99）
– 父元素有 transform、filter 或 will-change
– 父元素带 position: relative 且 z-index 不为 auto
解决办法：
– 把遮罩直接挂到 下，脱离所有可疑父级
– 或确保其直接父容器没上述任一属性
– 别依赖 DevTools 里看到的 z-index 数值，用 Layers 面板确认上下文是否分裂
pointer-events: auto 必须显式声明
遮罩写了 rgba()、fixed、z-index: 999，但点击仍穿透到底下按钮？八成是重置样式表把默认的 pointer-events: auto 改成了 none。
务必显式写：
– pointer-events: auto（拦截点击）
– 同时确保遮罩本身有尺寸（inset: 0 或明确宽高），空盒子无法响应事件
– 别和 opacity: 0 共存：看不见却点得到，用户会困惑
alpha 值别贪小，0.01 和 0 几乎没区别，常用安全区间是 0.4～0.8；移动端若边缘发虚，加 backface-visibility: hidden 强制硬件加速通常能缓解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
