css变量不能直接用于rgba()函数参数，因rgba()不解析变量；应改用hsl()带alpha语法、color-mix()混合透明色，或js动态生成rgba值，并注意opacity影响子元素而背景alpha不影响。
rgba里用CSS变量会失效？因为函数不接受变量插值
直接写 rgba(var(--r), var(--g), var(--b), var(--a)) 会报错或渲染为纯黑——rgba() 函数内部不解析 CSS 变量，它只认数字字面量。
正确做法是把整个颜色值交给 color 或 background-color 等属性去解析，而不是塞进 rgba() 的参数里：
- 用
hsl()或rgb()配合color-mix()（较新，兼容性有限） - 更稳的路：用
color: hsl(var(--h), var(--s), var(--l) / var(--a));（支持 alpha 通道的现代写法） - 或者退一步：用
background-color: rgb(var(--r), var(--g), var(--b)); opacity: var(--a);，但注意opacity会影响子元素
想只调透明度、不动颜色？用 color-mix() + transparent
Chrome 111+、Safari 16.4+ 支持 color-mix()，能按比例混合颜色与透明度，且不污染子元素：
button {
--base-color: #3b82f6;
background-color: color-mix(in srgb, var(--base-color), transparent 70%);
}
这里 transparent 70% 表示 70% 透明成分，等效于 30% 不透明度。关键点：
-
color-mix()的 alpha 是“混合权重”，不是最终透明度值，需反向换算 - 不能写成
color-mix(..., transparent var(--a))——var(--a)在百分比位置不被解析 - 若需运行时动态改，得靠 JS 更新
style.setProperty('--a', '60%')，再配合 CSS 自动重算
兼容老浏览器？用 rgba() 配合 JS 动态生成
IE 和旧版 Safari 不支持 color-mix() 或 HSL alpha 语法，只能回到 JS 控制：
- 定义颜色基础值为 CSS 变量，如
--r: 59; --g: 130; --b: 246; - JS 读取
getComputedStyle(el).getPropertyValue('--r')，拼出rgba(${r}, ${g}, ${b}, ${a}) - 设回
el.style.backgroundColor—— 注意这会覆盖 CSS 中的background-color声明 - 避免频繁重排：把透明度变化封装成 class 切换，CSS 预置多组
rgba()值
opacity vs background-color alpha：子元素是否要一起变淡？
这是最容易忽略的语义差异：
-
opacity: 0.3让整个元素及其所有子节点都变透明，不可逆 -
background-color: rgba(59, 130, 246, 0.3)只影响背景，文字、图标保持原样 - 如果用了
color-mix()或 HSL alpha，也只作用于当前属性，不影响子元素 - 动画透明度时，
opacity触发合成层，性能更好；而rgba()改变颜色可能触发重绘
真正要控制的是“谁该透、谁不该透”，而不是“哪个函数更酷”。选错这点，后面调半天动画都会卡在视觉逻辑上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
