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

Question

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

:root {
  --color: #f0f0f0;
}

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

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

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

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

Answer 1

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