rgba()中alpha值应设为0.6～0.8（如0.7），而非0或过小值（如0.01）；需确保遮罩有尺寸、挂载位置不触发层叠上下文、显式设置pointer-events: auto。
rgba() 里 alpha 值写 0 还是 0.01？
alpha 值为 0 是完全透明，1 是完全不透明；写 0.5 是标准半透，但很多人误以为 0.01 “更轻”，其实它会让遮罩几乎不可见，反而在视觉反馈上失效。
常见错误现象：点击区域没响应、遮罩“消失”——往往是因为 alpha 设成了 0 或过小的值（如 0.02），而不是预期的 0.6～0.8。
-
rgba(0, 0, 0, 0.7)是常用安全值：足够压暗背景，又不遮死内容 - 别用
hsla()替代rgba()来“微调”，浏览器解析一致性和调试成本更高 - alpha 不支持 CSS 变量直接插值（
rgba(0, 0, 0, var(--alpha))无效），得用background-color: hsl(... / var(--alpha))（现代浏览器）或 JS 动态设
z-index 失效？检查父容器是否创建了新层叠上下文
遮罩层没盖住目标元素，大概率不是 z-index 数值不够大，而是它的父容器触发了层叠上下文（比如设置了 opacity、transform、filter 或 will-change），导致子元素的 z-index 被限制在该上下文内。
使用场景：模态框 + 遮罩常嵌套在 position: relative 的容器里，而这个容器若加了 opacity: 0.99，就会切断遮罩与外层按钮的层级关系。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器 DevTools 的“Layers”面板确认是否意外创建了层叠上下文
- 优先把遮罩层（
.overlay）挂到<body>下，脱离任何可能带层叠上下文的父级 - 如果必须嵌套，确保其直接父容器没有
opacity、transform等属性
移动端点击穿透：半透明遮罩为何挡不住下面的按钮？
遮罩层有 background-color: rgba(0,0,0,0.5) 且 z-index 正确，但点击仍会触发背后元素——根本原因是遮罩本身没设置 pointer-events: auto（默认是 auto，但某些重置样式表会设成 none）。
性能影响：给遮罩加 pointer-events: auto 几乎无开销；但若误加 pointer-events: none，等于主动放弃拦截能力。
- 显式声明
pointer-events: auto，别依赖默认值 - 遮罩元素必须有尺寸（
width/height或inset: 0），空盒子即使有背景也无法响应事件 - 避免同时设
opacity: 0和pointer-events: auto——看不见还点得到，体验错乱
兼容性兜底：IE11 下 rgba() 不生效怎么办？
IE11 支持 rgba()，但老项目若用了 IE 兼容模式（X-UA-Compatible 设为 IE=8 或更低），rgba() 会被忽略，遮罩变成纯黑或完全消失。
参数差异：IE8 及以下只认 filter: progid:DXImageTransform.Microsoft.gradient 模拟透明黑，但已淘汰，不建议投入适配。
- 先确认页面实际渲染模式：DevTools 里看 Document Mode 是否为 Edge
- 简单兜底方案：用
background-color: #000+opacity: 0.6，但注意opacity会影响整个遮罩元素及其子节点（如有文字就一起变淡） - 真正要兼顾老环境，就放弃 rgba，改用半透 PNG 背景图（
background-image: url(overlay-60.png)）
