遮罩层透明度应使用 background-color: rgba() 而非 opacity，因后者会降低子元素可读性与交互性；须配合 css 变量（如 --mask-alpha）统一管理 alpha 值，并注意 hex 颜色需拆解为 rgb 分量才能用于 rgba()。
遮罩层透明度该用 background-color: rgba() 而不是 opacity
直接给遮罩容器设 opacity 是错的：它会让里面所有文字、按钮、图标一起变淡，可读性崩坏，还可能干扰点击事件（浏览器会降低半透明元素的事件捕获权重）。真正该控制的是“背景色本身的透明度”，所以必须用 rgba() 配合 CSS 变量。
常见错误现象：
– 弹窗遮罩层一打开，里面的「确定」按钮也变灰了
– 点击遮罩层空白处没反应，但点按钮区域却触发了底层页面操作
– 暗色模式下遮罩看起来太深或太浅，因为 opacity 值没变，但底色变了
-
rgba()只影响颜色通道，子元素保持 100% 清晰度和交互能力 - alpha 参数取值是
0～1，不是百分比（别写rgba(0,0,0,50%)，浏览器直接忽略） - 遮罩层必须带
position: fixed或absolute+z-index，否则叠不上去
用 CSS 变量声明透明度值，而不是硬编码 rgba(0, 0, 0, 0.6)
把数字写死在每个遮罩类里，等于埋雷：换主题时要全局搜 0.6，改禁用态要同步改多处，A/B 测试还得复制整套样式。变量才是可控起点。
实操建议：
– 在 :root 里统一定义：--mask-alpha: 0.6;
– 遮罩层样式中写：background-color: rgba(0, 0, 0, var(--mask-alpha));
- 变量名要语义化，比如
--mask-alpha-backdrop和--mask-alpha-overlay区分不同用途 - 避免在组件内部重定义同名变量（如
.modal { --mask-alpha: 0.4; }），容易被父级覆盖或污染其他模块 - 如果项目已用 HEX 变量（如
--bg-dark: #1a1a1a;），需额外拆解 RGB 分量（见下节），不能直接rgba(var(--bg-dark), 0.6)
HEX 变量怎么套进 rgba()？得先转成 RGB 分量变量
CSS 不支持对 HEX 变量直接加 alpha，background-color: rgba(var(--bg-dark), 0.6) 会失效。必须把颜色拆成 R/G/B 数字存为变量，再组合。
例如 #242424 → R=36, G=36, B=36：:root { --bg-dark-rgb: 36, 36, 36; }.mask { background-color: rgba(var(--bg-dark-rgb), var(--mask-alpha)); }
- 工具推荐：VS Code 插件 “Color Highlight” 或在线 HEX→RGB 转换器，避免手算出错
- 别漏 fallback：IE11 及更老浏览器不支持
rgba()，可用background: #000; background: rgba(0,0,0,0.6);降级 - 如果同时要用
backdrop-filter: blur(8px)，注意 Safari 旧版兼容性，且模糊会加重性能开销
遮罩层显示时记得锁 body 滚动，隐藏时还原
遮罩层弹出后用户还能滚底层页面，体验断裂。这不是透明度问题，但常被一起忽略。
JS 控制逻辑要配齐：
– 显示遮罩时：document.body.style.overflow = 'hidden';
– 隐藏遮罩时：document.body.style.overflow = '';（别写 'auto'，会覆盖原有 scroll 状态）
- 如果遮罩是通过 Vue/React 的 v-if 或 state 控制，确保这个 body 样式变更与组件生命周期同步
- 多个遮罩嵌套时（比如弹窗里再开抽屉），需计数管理 overflow，不能简单 toggle
- 移动端要注意
touchmove事件穿透，单靠overflow: hidden不够，必要时加pointer-events: none到 body 下层
var(--color) 套不进 rgba()”，然后退回硬编码，结果越改越散。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
