为何无法为:root中定义的HEX格式CSS变量设置背景透明度？

API 探路者

2026-7-30

为HEX格式的CSS变量添加透明度的可行方案

你之前的写法无效是因为rgba()函数的前三个参数需要是0-255的数值，而你传入的var(--theme-color)是#ff0000这个字符串，导致rgba(#ff0000, 0.2)属于无效语法，浏览器无法解析。

下面是两种实用的解决方法：

方法一：拆分RGB分量定义变量

直接将HEX颜色拆分为红、绿、蓝三个分量的数值，分别定义变量，就能正常配合rgba()使用：

:root {
  /* 将#ff0000拆分为R=255, G=0, B=0 */
  --theme-color-r: 255;
  --theme-color-g: 0;
  --theme-color-b: 0;
}

tr {
  background: rgba(var(--theme-color-r), var(--theme-color-g), var(--theme-color-b), 0.2);
}

方法二：使用`color-mix`函数（现代浏览器推荐）

利用CSS的color-mix函数，直接将原颜色与透明色混合，不需要拆分分量，语法更简洁：

:root {
  --theme-color: #ff0000;
}

tr {
  /* 混合80%的透明色，最终原颜色保留20%的不透明度，对应需求的opacity:0.2 */
  background: color-mix(in srgb, var(--theme-color), transparent 80%);
}