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

不能采用现有 colored颜色 值并对其应用Alpha通道.也就是说，不能将现有的祸不单行值(如#f0f0f0%)赋予它一个Alpha分量，然后将结果值用于另一个属性.

但是，自定义属性允许您将祸不单行值转换为RGB三元组以便与rgba()一起使用，将该值存储在自定义属性中(包括逗号！)，将使用var()的值替身转换为具有所需Alpha值的rgba()函数，这样就可以正常工作:

: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>

这似乎太好了，简直令人难以置信.¹它是如何工作的？

神奇之处在于，当替换属性值中的var()个引用(before)时，定制属性值被替换as is，该属性值被计算.这意味着，就自定义属性而言，示例中的值--color根本不是 colored颜色 值until出现在需要 colored颜色 值的某个位置(并且仅在该上下文中)的var(--color)表达式.从CSS-Variables规范的section 2.1%开始:

自定义属性允许的语法非常宽松.<；声明值&>产品匹配一个或多个内标识的任何序列，只要该序列不包含<；错误字符串-令牌&>，<；错误-url-令牌&>，不匹配<；)-令牌&>，<；]-令牌&>或<；}-令牌&>，或顶级<；分号-令牌&>

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

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

虽然这个值作为变量显然没有用，因为它在任何普通属性中都是无效的，但是它可以由JavaScript读取和操作.

和section 3:

如果一个属性包含一个或多个var()函数，且这些函数在语法上有效，则必须假定整个属性的语法在解析时有效.只有在替换了var()函数之后，才会在计算值时对其进行语法判断.

这意味着上面看到的240, 240, 240值被直接替换到rgba()函数before中，声明就是计算出来的.所以这就是:

#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值，你可以随时交换.

¹ _{Well, it is, if you're running the code snippet in a browser that doesn't support custom properties.}