如何将不透明度应用于CSS颜色变量？

如何将不透明度应用于CSS颜色变量？

您不能采用现有的颜色值并对其应用Alpha通道。也就是说，您不能使用现有的十六进制值（例如）

#f0f0f0

，给它一个alpha分量，并将结果值与另一个属性一起使用。

但是，自定义属性允许您将十六进制值转换为RGB三元组以与一起使用

rgba()

，将该值存储在自定义属性（包括逗号！）中，使用将该值替换

var()

为

rgba()

具有所需alpha值的函数，然后它将正常工作：

:root {    --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它是如何工作的？

奇妙之处在于一个事实，即自定义属性的值替换 为是 更换时

var()

在属性值中的引用， 之前
计算该属性的值。这意味着，只要自定义属性而言，价值

--color

在你的例子是不是在所有的颜色值 ，直到
一个

var(--color)

表达式出现的地方，需要一个颜色值（也只有在这种情况下）。根据css-variables规范的第2.1节：

自定义属性的允许语法极为宽松。生产匹配一个或多个令牌的任何序列，只要该序列不包含，，不匹配的<）-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 是的，如果您正在不支持自定义属性的浏览器中运行代码段。