真正只让背景变半透、子元素保持原样清晰可点的，只有 background-color: rgba(0, 0, 0, 0.6) 这类写法；常见错误包括 transparent 覆盖 rgba、混用 background 与 background-color、alpha 写成 50 或 50%。
用 background-color: rgba() 替代 opacity
直接给父容器设 opacity 会让所有子元素（文字、按钮、图标）一起变淡、发虚、点击迟钝——这不是半透明遮罩，是视觉降级。真正只让背景变半透、子元素保持原样清晰可点的，只有 background-color: rgba(0, 0, 0, 0.6) 这类写法。
常见错误包括：
-
background: rgba(0, 0, 0, 0.5) transparent——transparent会覆盖前面的rgba值，实际生效的是全透明 - 把
background和background-color混用，后者被前者静默忽略 - alpha 写成
50或50%—— 必须是0.5，CSS 不接受整数或百分比形式
伪元素方案：用 ::before 或 ::after 隔离遮罩层
当父容器本身需要保留纯色背景、边框或阴影时，不能直接改它的 background-color，就得用伪元素承载半透明层。
关键操作点：
- 父容器必须显式设
position: relative，否则伪元素会相对于body定位 - 伪元素必须写
content: ""，否则不渲染 - 推荐用
inset: 0而非top: 0; right: 0; bottom: 0; left: 0，语义更简洁，兼容性也足够（Chrome 87+、Firefox 66+、Safari 14.1+） - 若需遮罩响应点击，别漏掉
pointer-events: auto（某些重置样式表会把它设为none）
z-index 盖不住？先查是否触发了层叠上下文
遮罩明明写了 z-index: 999，却盖不住绝对定位的按钮，大概率不是数值不够大，而是它的父容器悄悄创建了新层叠上下文。
触发条件包括：
- 父元素设了
opacity（哪怕只是0.99） - 父元素有
transform、filter或will-change - 父元素是
position: relative且z-index不为auto
解决办法只有两个靠谱路径：
- 把遮罩层（如
.overlay）直接挂到下，彻底脱离可疑父级 - 确保遮罩的**直接父容器**没上述任一属性——别信 DevTools 里看到的
z-index数值，用浏览器 Layers 面板确认上下文是否分裂
移动端边缘发虚或点击穿透？补上这三行
iOS Safari 和部分安卓 WebView 对半透明层的渲染和事件捕获比较敏感，光靠 rgba() + fixed 不够稳。
必须加的防护项：
-
backface-visibility: hidden—— 缓解边缘发虚、闪烁 -
transform: translateZ(0)—— 强制 GPU 加速，提升过渡顺滑度 -
pointer-events: auto显式声明 —— 防止重置样式表静默关闭事件捕获
alpha 值别贪小：0.01 和 0 几乎没区别；常用安全区间是 0.4～0.8；移动端若用 0.2，用户可能根本感知不到遮罩存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
