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

我正在使用 Electron 设计一个应用程序，因此我可以访问 CSS 变量。我已经定义了一个颜色变量vars.css:

:root {
  --color: #f0f0f0;
}

我想用这个颜色main.css，但应用了一些不透明度：

#element {
  background: (somehow use var(--color) at some opacity);
}

我该怎么做呢？我没有使用任何预处理器，只使用CSS。我更喜欢全 CSS 答案，但我会接受 JavaScript/jQuery。

我无法使用opacity因为我使用的背景图像不应该是透明的。

您不能采用现有颜色值并向其应用 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>

This seems almost too good to be true.¹ How does it work?

神奇之处在于自定义属性的值被替换as is更换时var()属性值中的引用，before该属性的值已计算。这意味着就自定义属性而言，--color在你的例子中根本不是颜色值until a var(--color)表达式出现在需要颜色值的地方（并且仅在该上下文中）。从第2.1节 https://www.w3.org/TR/css-variables-1/#syntaxcss 变量规范：

自定义属性允许的语法非常宽松。 产生式匹配一个或多个标记的任何序列，只要该序列不包含 、、不匹配的 、 或 或顶级 标记或值为“!”的 标记。

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

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

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

And 第3节 https://www.w3.org/TR/css-variables-1/#using-variables:

如果某个属性包含一个或多个 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.}