遮罩层应使用 background-color: rgba() 而非 opacity，因后者会使整个元素及子元素透明并削弱点击响应；需配合 pointer-events: none 和正确 z-index 控制交互与层级。
透明背景本身不会导致点击穿透，真正的问题是：你用了 opacity 或 visibility: hidden 隐藏遮罩，却没关掉它的事件响应能力——浏览器照常把 touch/click 分发给它，哪怕它“看不见”。
为什么 background-color: rgba() 比 opacity 更安全
用 background-color: rgba(0, 0, 0, 0.5) 只改背景透明度，不碰子元素渲染和事件热区；而 opacity: 0.5 会让整个 DOM 节点（含按钮、文字）一起变模糊、响应变弱，iPhone 上尤其容易点偏或失效。
- rgba() 的 alpha 值范围是 0～1，常用
0.4～0.7，足够遮挡又不压死下层交互 - 如果遮罩里有关闭按钮，
opacity会让按钮热区收缩，用户得更准地戳中中心点 - rgba() 不触发重排，动画性能比 opacity 更稳，尤其在低端安卓机上
pointer-events: none 必须加在遮罩自身上
很多人把 pointer-events: none 写在父容器或兄弟节点，结果无效——浏览器事件捕获只检查**真正盖住目标的元素**，不是看 z-index 多高，而是看 hit-test 是否命中它。
- 错误写法：
.dialog { pointer-events: none; }→ 实际遮罩是.mask子元素，它仍拦截点击 - 正确写法：
.mask { position: fixed; pointer-events: none; }，再用z-index确保它视觉上在顶层 - Chrome DevTools 的 Rendering → “Hit test borders” 可直观验证哪一层实际覆盖了点击位置
遮罩里有关闭按钮时怎么处理
父元素设了 pointer-events: none，子元素写 pointer-events: auto 完全无效——这是所有现代浏览器统一行为，不是 bug。hit-testing 阶段整棵子树直接被跳过。
- React/Vue 场景优先用 Portal 把按钮挂到
下，脱离遮罩 DOM 树 - 纯 CSS 方案：用伪元素模拟遮罩背景，比如
.mask::before { content: ""; position: absolute; pointer-events: none; }，真实按钮留在主流 DOM 中 - 别用
position: absolute把按钮“视觉上浮出”，DOM 结构里它还是被父级 none 拦截
最容易漏的是动画过渡期：用 opacity 淡入时，若只在开始加 pointer-events: none、结束时不移除，用户会在半透明阶段点不到任何东西。必须监听 transitionend 或用 setTimeout 在动画完成后再切回 auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
