最稳妥方案是用 --opacity-* 变量配合 rgba() 或 hsla()；opacity 属性不支持 css 变量赋值，因语法限制会失效；rgba() 内可安全使用 var() 提取 alpha 值。
直接用 --opacity-* 变量配合 rgba() 或 hsla() 是最稳妥的方案；别把 opacity 属性本身设成 CSS 变量——它不支持变量插值，会失效。
为什么不能给 opacity 属性赋值 CSS 变量
CSS 的 opacity 属性只接受数字字面量（如 0.7），不支持 calc() 外的动态计算，更无法直接绑定 var(--opacity-main)。写成这样会完全无效：
.box { opacity: var(--opacity-main); }
浏览器会忽略该声明，回退到默认不透明。这不是兼容性问题，而是语法限制。
rgba() + var() 是实际可行的组合
把 alpha 通道单独抽成变量，再传入 rgba() 函数中，是目前最通用、最可控的方式：
:root { --primary-red: 255; --primary-green: 99; --primary-blue: 71; --alpha-card: 0.85; }.card { background-color: rgba(var(--primary-red), var(--primary-green), var(--primary-blue), var(--alpha-card)); }- 注意：
rgba()内部的var()必须是纯数字，不能带单位或百分号 - 旧版 Safari（
用 hsla() 管理主题色透明度更语义化
当你的设计系统基于 HSL 色彩模型（比如通过色相轮统一调整主色），把透明度作为独立变量嵌入 hsla() 更自然：
:root { --hue-primary: 210; --sat-primary: 85%; --light-primary: 55%; --alpha-overlay: 0.15; }.overlay { background-color: hsla(var(--hue-primary), var(--sat-primary), var(--light-primary), var(--alpha-overlay)); }- 优势在于：换主题时只需改
--hue-primary，所有带透明度的组件自动同步变色，无需重写 alpha - 缺点：IE 完全不支持
hsla()，但 IE 已退出主流支持范围
避免在动画中用变量驱动 opacity
如果想做透明度过渡动画（比如 hover 淡入），不要试图用 JS 动态改 --opacity-hover 再靠 CSS 变量触发变化——这无法触发硬件加速，且多数浏览器不支持变量参与 transition。
- 正确做法：保留
opacity为静态值，用transition: opacity 0.2s ease，再用 JS 切换 class 控制开关 - 或者用
filter: opacity()（支持变量 + transition，但注意它不继承，且部分安卓 WebView 渲染异常） - 真正需要运行时调节透明度的场景（如滑块控制），用 JS 直接设置
element.style.opacity = value，比绕路 CSS 变量更可靠
最常被忽略的一点：CSS 自定义属性管理透明度，本质是「解耦颜色定义与透明度控制」，而不是替代 opacity 属性本身。一旦混淆这个边界，就会掉进变量不生效、动画卡顿、兼容性崩塌的坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
