我正在用electron设计一个应用程序，所以我可以访问CSS变量。我在vars.css中定义了一个颜色变量：
：root{
--颜色：#f0；
}
我想在main.css中使用此颜色，但应用了一些不透明度：
#元素{
背景：（以某种方式在某些不透明度下使用var（--color））；
}
我该怎么做呢？我没有使用任何预处理器，只有CSS。我更喜欢全CSS的答案，但我会接受JavaScript/jQuery
我不能使用不透明度，因为我使用的背景图像不应该是透明的
不能采用现有颜色值并对其应用alpha通道。也就是说，您不能接受现有的十六进制值，例如#f0，为其指定alpha分量并将结果值与另一个属性一起使用
但是，自定义属性允许您将十六进制值转换为RGB三元组，以便与rgba（）一起使用，将该值存储在自定义属性中（包括逗号！），使用var（）将该值替换为rgba（）函数和所需的alpha值，这样就可以了：
：root{
/*#十进制RGB中的F0*/
--颜色：240，240，240；
}
身体{
颜色：#000；
背景色：#000；
}
#元素{
背景色：rgba（var（--色），0.8）；
}<；p id=“元素”>；如果您可以看到这一点，则您的浏览器支持自定义属性。</p>这似乎太好了，不可能是真的。1它是如何工作的
神奇之处在于，当替换属性值中的var（）引用时，在计算该属性的值之前，自定义属性的值被替换为。这意味着，就自定义属性而言，示例中--color的值根本不是颜色值，直到一个var（--color）表达式出现在需要颜色值的地方（并且仅在该上下文中）。根据css变量规范第2.1节：
自定义属性允许的语法非常宽松。这个<；申报价值>；只要序列不包含<；错误的字符串标记>&书信电报；错误的url标记>；，无与伦比<；）-代币><；]-代币>；，或<；}-代币>；，或顶级<；分号标记>；代币或<；德利姆代币>；值为“的代币&引用
例如，以下是有效的自定义属性：
--foo:if（x>；5）this.width=10；虽然这个值作为变量显然是无用的，因为它在任何普通属性中都是无效的，但JavaScript可能会读取它并对其执行操作
和第3节：
如果属性包含一个或多个var（）函数，并且这些函数在语法上有效，则必须假定整个属性的语法在解析时有效。只有在替换了var（）函数后，才在计算值时检查语法
这意味着在计算声明之前，上面看到的240240240值将直接替换到rgba（）函数。因此：
#元素{
背景色：rgba（var（--色），0.8）；
}
一开始它似乎不是有效的CSS，因为rgba（）要求不少于四个逗号分隔的数值，因此变成：
#元素{
背景色：rgba（240,240,240,0.8）；
}
当然，这是完全有效的CSS
更进一步，您可以将alpha组件存储在其自己的自定义属性中：
：root{
--颜色：240，240，240；
--α：0.8；
}
并将其替换，得到相同的结果：
#元素{
背景色：rgba（var（--color），var（--alpha））；
}
这允许您拥有不同的alpha值，可以随时交换
1如果您在不支持自定义属性的浏览器中运行代码段，那么就是这样。