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

Question

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

:root {
  --color: #f0f0f0;
}

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

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

我将如何去做呢？我没有使用任何预处理器，只有CSS。我希望使用全CSS的答案，但是我会接受JavaScript / jQuery。

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

Answer 1

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

这似乎太好了，难以置信。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 是的，如果您正在不支持自定义属性的浏览器中运行代码段。