不能直接给var(--color)加透明度，因变量值为字符串，需拆解为rgb分量；推荐用--color-rgb存数字分量（如14,156,206）再配合rgb()/rgba()使用，或现代浏览器用var(--color)/alpha语法。
不能直接给 var(--color) 加透明度，因为变量值是字符串（比如 #242424 或 rgb(36, 36, 36)），而 rgba()、/ 语法等只接受数值型参数。必须把颜色“拆开”成可计算的 RGB 分量，才能动态组合透明度。
用 --color-rgb 变量存纯数字分量
这是最可控、兼容性好、不依赖构建工具的方案。核心是：变量里不存完整颜色，只存逗号分隔的三个数字。
-
--primary-rgb: 14, 156, 206;—— 对应#0e9cce，注意不带括号、不带单位 - 所有使用该颜色的地方，用
rgb(var(--primary-rgb))恢复不透明色 - 需要透明背景时，写
rgba(var(--primary-rgb), 0.2)，浏览器会把变量展开后正确解析 - 别写
rgba(var(--primary-rgb), 0.2)里加空格或括号，如rgba( var(--primary-rgb) , 0.2 )会失败
用现代 / 语法配合 HSL/RGB 变量
如果你的目标环境是 Chrome 111+、Firefox 110+、Safari 16.4+（2026 年已基本全覆盖），优先用这个写法——简洁、语义清晰、无需额外变量。
- 定义变量时直接用 HSL 或空格分隔的 RGB：
--primary: hsl(198 85% 43%);或--primary: rgb(14 156 206); - 不透明背景：
background-color: var(--primary); - 半透明背景：
background-color: var(--primary) / 0.3;—— 注意是空格 +/，不是逗号 - 错误写法：
var(--primary), 0.3（语法错误）、rgba(var(--primary), 0.3)（var(--primary)是字符串，不是数字） - alpha 值建议统一用百分比（如
/ 30%），和 HSL 的%单位保持视觉一致性
十六进制颜色加透明度的快捷方式
如果变量本身就是 HEX，又不想改定义方式，可用 8 位或 4 位 HEX 表示透明度，但仅适用于静态值，无法动态绑定变量。
-
#0e9cce4d→ 等价于rgba(14, 156, 206, 0.3)（最后两位4d≈ 77/255 ≈ 0.3） -
#09c→#0099cc；#09c6→#0099cc66（即 alpha = 0.4） - 缺点：无法用 CSS 变量控制透明度值，每次改透明度都要手动换 HEX；设计师给的 HEX 通常不含 alpha，需额外转换
- 不推荐用于主题系统，适合单点微调（如一个固定遮罩层）
为什么不用 opacity 替代？
因为 opacity 作用于整个元素及其子树，会把文字、图标、边框一起变淡；而 rgba() 或 / 语法只影响那个颜色通道本身。
- 按钮背景要半透、文字要清晰 → 必须用
background-color: rgba(...)或var(--x) / 0.2 - 用
opacity: 0.2会导致按钮内文字也变成 20% 不透明，可读性崩坏 -
backdrop-filter: blur(8px)要生效，背后内容必须“可见”，所以必须用颜色级透明，而非元素级透明
真正麻烦的是变量来源不可控：如果第三方 UI 库或设计系统只提供 HEX 变量，你就得在项目里额外维护一套 --x-rgb 映射表。这时候别硬套 / 语法——它不会帮你自动转换 HEX，只会报错或静默失效。先确认变量原始格式，再选路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
