全屏半透明遮罩必须用 position: fixed + inset: 0 和 background-color: rgba()，禁用 opacity；因 opacity 会继承导致子元素不可读、事件异常，fixed 才能稳定覆盖视口且避免滚动露底。
直接用 opacity 给整个遮罩容器设透明度，里面的所有文字、按钮、图标都会跟着变淡甚至不可读——这不是遮罩，是“视觉失焦”。真正可用的全屏半透明遮罩，必须用 background-color: rgba() 配合 position: fixed，其他写法大概率在滚动、缩放或移动端出问题。
为什么不能用 opacity 实现全屏遮罩
opacity 是继承式透明：父元素设 opacity: 0.5，子元素无论怎么写 opacity: 1 都无效，浏览器会强制把所有后代的透明度乘以 0.5。常见现象包括：
- 弹窗里的
<button></button>文字发虚，hover 效果变弱 - 点击区域响应迟钝，部分安卓 WebView 会降级事件捕获优先级
- 想“补救”而给子元素设
opacity: 2——CSS 不支持大于 1 的值，语法错误
它唯一合理用途是整页淡入/淡出动画，或临时禁用一块 UI 区域（且该区域不包含可交互子内容）。
全屏遮罩必须用 position: fixed + inset: 0
用 position: absolute 写全屏遮罩，滚动后立刻露底；父容器加了 overflow: hidden 或 transform，遮罩还会被截断。只有 fixed 能锚定视口，稳稳盖住一切。
- 必须写
top: 0; right: 0; bottom: 0; left: 0，比width: 100vw; height: 100vh更可靠（vh在 iOS Safari 中受地址栏高度影响，常漏底） - 如果用伪元素（如
::before），content: ""必须显式声明，否则不渲染 - 避免在遮罩父容器上加
transform、filter、will-change——它们会隐式创建新层叠上下文，让z-index失效
rgba() 背景怎么写才不翻车
background-color: rgba(0, 0, 0, 0.5) 看似简单，但容易因尺寸、层级或兼容性失效：
- 元素本身没宽高？
rgba()只画在背景区域，空盒子自然“看不见”。确保父容器有明确width/height，或伪元素加inset: 0 - 和
background-color: #000混用？后者会被前者覆盖，别写成background: rgba(...) #000 - 十六进制 alpha（如
#0008）在 Safari ≤15 和部分安卓 WebView 中渲染异常，现代项目一律用rgba()或hsla() - alpha 值推荐 0.4–0.6：太浅压不住底层，太深看不清弹窗内容；深色模式下可配合
@media (prefers-color-scheme: dark)单独调高到0.65
点击遮罩关闭弹窗时，为什么点了弹窗内部也关了
监听遮罩的 click 事件时，事件会从弹窗内容冒泡上来，导致点 anywhere 都触发关闭。安全做法是：
- 在遮罩 click 回调里判断
event.target === event.currentTarget，只响应本体点击 - 给弹窗内容容器加
pointer-events: auto（默认已是），并在其 click 处理中调用e.stopPropagation() - 别给遮罩加
pointer-events: none——这会让它彻底无法捕获事件，连cursor: default都失效 - 遮罩必须有非零背景（哪怕
rgba(0,0,0,0.01)），否则某些 Safari 版本不触发 click
最易忽略的是层叠上下文分裂：遮罩和弹窗若不在同一层叠上下文中（比如父容器各自加了 transform 或 opacity），z-index 就失去可比性，遮罩再高也盖不住——检查并移除那些隐式触发层叠的属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
