rgba()函数不解析CSS变量，因只接受字面量数字，var()返回字符串导致无效值而降级为纯黑或透明；正确做法是拆分RGB为独立变量后组合，或用hsl(0,0%,0%/var(--a))等现代写法。
不能直接用 rgba(var(--r), var(--g), var(--b), var(--a)) 控制全屏遮罩层透明度——浏览器会报错或渲染为纯黑，因为 rgba() 函数内部不解析 CSS 变量。
为什么 rgba() 里不能直接插 CSS 变量
rgba() 是函数式语法，只接受字面量数字（如 255, 128, 64, 0.7），不支持变量插值。写成 rgba(var(--r), var(--g), var(--b), var(--a)) 时，各 var() 返回字符串，整个表达式被当作无效值丢弃，降级为 rgba(0,0,0,0) 或透明背景，视觉上常表现为“突然消失”或“黑块”。
常见错误现象：
- 遮罩层在 Chrome 中显示为纯黑，Firefox 中完全不可见
- DevTools 里看到
background-color: rgba(...)被划掉，状态为 invalid value - JS 修改
--a后，遮罩无变化，但 console 没报错（静默失败）
正确做法：用 RGB 分量变量 + rgba() 函数
把颜色拆成独立的 R/G/B 数值变量，再组合进 rgba() —— 这是目前兼容性最好、零 JS、纯 CSS 的方案。
立即学习“前端免费学习笔记（深入）”；
实操步骤：
- 将原始 HEX（如
#242424）转为 RGB 分量：36, 36, 36 - 在
:root中定义基础变量：--dark-r: 36; --dark-g: 36; --dark-b: 36; - 遮罩层样式写成：
background-color: rgba(var(--dark-r), var(--dark-g), var(--dark-b), var(--overlay-alpha)); - 通过 JS 或媒体查询动态改
--overlay-alpha，例如：el.style.setProperty('--overlay-alpha', '0.8');
注意：--overlay-alpha 必须定义在遮罩元素自身或其祖先上，且值必须是 0–1 范围内的数字（如 '0.6'，不是 '60%'）。
想只调透明度、不动颜色？用 color-mix() 或 HSL alpha（现代写法）
如果遮罩色固定（比如总是黑色），且只需动 alpha，color-mix() 和 HSL alpha 更简洁，但有兼容性限制：
-
background-color: color-mix(in srgb, #000, transparent 70%);—— Chrome 111+ / Safari 16.4+ 支持；70%表示混合中 70% 是透明，等效于 30% 不透明度 -
background-color: hsl(0, 0%, 0% / var(--overlay-alpha));—— 所有现代浏览器支持（Chrome/Firefox/Safari ≥15.4），/后直接接变量，无需calc() - 别写
color-mix(in srgb, #000, transparent var(--a))——var(--a)在百分比位置不被解析，会失效
全屏遮罩的定位和事件穿透必须手动处理
即使透明度逻辑跑通，遮罩仍可能“不工作”，原因往往不在颜色本身：
- 必须用
position: fixed; top: 0; right: 0; bottom: 0; left: 0;（不用inset: 0，IE11 不支持） - 确保
z-index足够高，且父容器没设opacity: 0或visibility: hidden（会切断 backdrop 渲染链） - 遮罩要拦截点击？必须显式设
pointer-events: auto;；若只是视觉层，可设pointer-events: none; - 避免和
backdrop-filter同时用transform—— Safari 下易崩溃
最易忽略的一点：rgba() 只影响背景，文字/图标/子元素保持原样；而误用 opacity 会导致整个遮罩层及其内容一起变淡，且子元素无法“加回来”。选哪种方式，本质是选语义——你要模糊的是“背后内容”，还是“这个遮罩盒子本身”。
