您不能采用现有的颜色值并将 Alpha 通道应用到它。也就是说，您不能采用现有的十六进制值，例如#f0f0f0，给它一个 alpha
分量并将结果值与另一个属性一起使用。

但是，自定义属性允许您将十六进制值转换为 RGB 三元组以与
一起使用rgba()，将该值存储在自定义属性中（包括逗号！），将该值替换var()为rgba()具有所需 alpha 值的函数，它会只是工作：

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}


<p id="element">If you can see this, your browser supports custom properties.</p>

这似乎好得令人难以置信。1它是如何工作的？

神奇之处在于，在计算该属性的值 之前 ，在替换属性值中的引用时，自定义属性的值被替换 为原样
。这意味着就自定义属性而言，您示例中的值根本不是颜色值， 直到 表达式出现在需要颜色值的某个地方（并且仅在该上下文中）。从css-variables
规范的第 2.1 节：var()
--color var(--color)

自定义属性的允许语法非常宽松。 产生式匹配一个或多个令牌的任何序列，只要该序列不包含 、、不匹配的 <)-token>、<]- token> 或 <}-token> 或顶级 令牌或 令牌，其值为“！”。

例如，以下是有效的自定义属性：

--foo: if(x > 5) this.width = 10;

虽然这个值作为变量显然是无用的，因为它在任何普通属性中都是无效的，但它可能会被 JavaScript 读取和操作。

第 3节：

如果属性包含一个或多个 var() 函数，并且这些函数在语法上有效，则必须假定整个属性的语法在解析时有效。在 var()
函数被替换之后，它仅在计算值时进行语法检查。

这意味着您在上面看到的值会在计算声明 之前240, 240, 240直接替换到rgba()函数中。所以这： __

#element {
  background-color: rgba(var(--color), 0.8);
}

起初看起来不是有效的 CSS，因为rgba()需要不少于四个逗号分隔的数值，变成这样：

#element {
  background-color: rgba(240, 240, 240, 0.8);
}

当然，这是完全有效的 CSS。

更进一步，您可以将 alpha 组件存储在其自己的自定义属性中：

:root {
  --color: 240, 240, 240;
  --alpha: 0.8;
}

并替换它，结果相同：

#element {
  background-color: rgba(var(--color), var(--alpha));
}

这允许您拥有不同的 alpha 值，您可以在运行中交换这些值。

1 好吧，如果您在不支持自定义属性的浏览器中运行代码片段。