应将RGB与alpha分离定义为CSS变量，如--black-rgb: 0, 0, 0和--alpha-50: 0.5，再组合使用rgba(var(--black-rgb), var(--alpha-50))，以提升可维护性、主题适配性与兼容性。
用 :root 定义基础色 + alpha 分离变量
直接在 :root 里写 rgba(0, 0, 0, 0.5) 看似省事，但无法复用——改透明度就得挨个替换所有值。真正可维护的做法是把 RGB 数值和 alpha 拆开：--black-rgb: 0, 0, 0 和 --alpha-50: 0.5 分别定义，再组合使用。
这样做的好处是：换主题色只需改一个 --black-rgb，所有用到它的半透明变体自动更新；调遮罩强度也只要动 --alpha-xx 变量，不影响其他地方。
无序列表说明关键点：
-
--black-rgb必须不含括号、空格只保留逗号分隔（如0, 0, 0），否则rgba(var(--black-rgb), var(--alpha-50))会解析失败 - IE 不支持 CSS 变量，若需兼容，得额外提供 fallback（比如在变量声明前写一条
background-color: rgba(0, 0, 0, 0.5)） - alpha 值建议用小数（
0.4）而非百分比（40%），避免部分旧版 Safari 对百分比 alpha 的兼容问题
为什么不能直接用 rgba() 函数包裹变量
CSS 不允许在 rgba() 内部动态拼接变量值，比如 rgba(var(--r), var(--g), var(--b), var(--a)) 是合法的，但 rgba(var(--rgb), var(--a)) 会失败——因为 --rgb 是字符串 "0, 0, 0"，不是三个独立数值。
立即学习“前端免费学习笔记（深入）”；
所以必须严格按“三元 RGB + 单独 alpha”拆分，且确保变量名语义清晰，例如：
-
--primary-rgb: 30, 144, 255（非--primary: #1e90ff） -
--alpha-overlay: 0.6（非--opacity: 60%，避免和opacity属性混淆） - 使用时统一写成
background-color: rgba(var(--primary-rgb), var(--alpha-overlay));
配合 hsla() 实现色调一致的半透明色板
如果项目大量使用 HSL 色彩系统（比如通过色相偏移做暗色模式），hsla() 比 rgba() 更自然。可以定义 --hue-primary: 210、--saturation: 100%、--lightness: 50% 和 --alpha: 0.4，然后组合为 hsla(var(--hue-primary), var(--saturation), var(--lightness), var(--alpha))。
注意点：
-
hsla()的saturation和lightness必须带单位（%），漏掉会导致整条声明被忽略 - 明度（
lightness）设太高（如95%）再叠alpha: 0.1，视觉上接近白底，容易让文字对比度不足——建议搭配 WCAG 对比度检测工具验证 - 不要混用
rgba()和hsla()变量去生成同一类组件（如按钮背景），色感会不统一
实际使用中容易被忽略的层级与继承陷阱
变量本身不带作用域，一旦在 :root 定义，所有后代元素都能访问。但如果你在某个组件内部覆盖了 --alpha-50，它只影响该组件及其子元素，外部不受影响——这点常被误认为“变量没生效”。
更隐蔽的问题是：当父元素设置了 opacity: 0.8，子元素即使用了 rgba(0, 0, 0, 0.5)，最终叠加透明度是 0.8 × 0.5 = 0.4。这种复合效果很难调试，尤其在模态框 + 遮罩层嵌套时。
建议做法：
- 全局色板变量只用于
background-color、border-color、color等属性，绝不用于opacity - 遮罩层（overlay）必须用
position: fixed或脱离常规文档流，避免被父级opacity影响 - 检查 DevTools 中 computed 样式里的
background-color值是否真的解析成了rgba(…)，而不是回退到了初始值（比如transparent）
