<p>opacity: var(--alpha) 失效是因为 opacity 只接受 0–1 数字，而 CSS 变量本质是字符串，需用 calc(var(--alpha) * 1) 绕过类型限制，且变量值必须为纯小数、初始值显式声明。</p>
opacity: var(--alpha) 直接写会失效，浏览器当它不存在，最终回退到 opacity: 1。必须用 calc() 或 filter: opacity() 绕过类型限制。
为什么 opacity: var(--alpha) 总是不生效
因为 opacity 只接受数字（0–1），而 CSS 变量本质是字符串——哪怕你定义的是 --alpha: 0.4，解析时仍是字符串，不会自动转类型。DevTools 的 computed 值常为空或 initial，容易误判为“没生效”，其实是被忽略。
常见踩坑点：
-
--alpha: 40%：百分比单位无法被opacity解析，等同于未声明 - 变量定义在
:root，但元素在 shadow DOM 内部：继承链断裂，变量不可见 - JS 设置时漏引号：
el.style.setProperty('--alpha', 0.4)，Safari 旧版对0解析异常，应统一传字符串'0.4'
用 opacity: calc(var(--alpha) * 1) 最稳妥
这是目前兼容性最好、副作用最小的方案。Chrome/Firefox/Edge 全支持，Safari 15.4+ 开始支持，且不触发新层叠上下文。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 变量值必须是纯小数，如
--alpha: 0.3；若存的是百分比（--alpha: 30%），得写calc(var(--alpha) / 100) - 初始值要显式设：
:root { --alpha: 1; }，否则未定义时calc()返回NaN，整条声明失效 - 动画靠
transition: opacity 0.2s，不是给--alpha加transition——CSS 变量本身不可动画
用 filter: opacity(var(--alpha)) 的代价
它确实支持变量，但会创建新层叠上下文，影响 z-index、overflow、mask 等行为，IE 完全不支持。
使用前提：
- 动画必须写
transition: filter 0.2s，写opacity不生效 - 已有其他
filter（如blur(2px)）时，需合并：filter: blur(2px) opacity(var(--alpha))，顺序不能反 - 移动端某些 WebView（尤其 Android 9 以下）偶发闪烁或卡顿，慎用于关键动效
- 别和原生
opacity混用——它们走不同渲染通道，视觉会跳变
背景透明？别碰 opacity，改用 rgba() + RGB 变量
如果目标只是让背景色变透明，而文字、图标保持清晰，opacity 是错误选择——它会让整个元素及其子节点一起发虚。
正确做法是拆分颜色：
- 把十六进制色
#242424转成 RGB 分量：--dark-base: 36, 36, 36 - 背景用
background-color: rgba(var(--dark-base), var(--bg-alpha, 0.8)) - 文字仍用
color: rgb(var(--dark-base))，完全不透明 - 这样既复用同一套颜色定义，又实现背景透明独立调控
复杂点在于：RGB 分量变量不能直接从 HEX 自动推导，必须手动转换或借助构建工具预处理；--bg-alpha 同样要确保是小数，且初始值必须显式声明，否则 rgba() 第四个参数为 NaN 时整条规则失效。
