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

Question

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

 :root {
  --color: #f0f0f0;
}

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

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

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

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

原文由 jotch 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

这似乎好得令人难以置信。 1它是如何工作的？

神奇之处在于，在计算属性值 _之前_，在替换属性值中的 var() 引用时，自定义属性的值会 被 替换。这意味着就自定义属性而言，在您的示例中 --color 的值根本不是颜色值， 直到 var(--color) 表达式出现在需要颜色值的某处（并且仅在这种情况下）。从 css-variables 规范的 第 2.1 节：

自定义属性的允许语法非常宽松。 产生式匹配一个或多个令牌的任何序列，只要该序列不包含 、、不匹配的 <)-token>、<]- token> 或 <}-token> 或顶级 令牌或 令牌，其值为“！”。

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

>  --foo: if(x > 5) this.width = 10;
>
> ```
>
> 虽然这个值作为变量显然是无用的，因为它在任何普通属性中都是无效的，但它可能会被 JavaScript 读取和操作。

[第 3 节](https://www.w3.org/TR/css-variables-1/#using-variables)：

> 如果属性包含一个或多个 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好吧，如果您在不支持自定义属性的浏览器中运行代码片段。

原文由 BoltClock 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我知道 OP 没有使用预处理器，但如果以下信息是此处答案的一部分，我会得到帮助（我还不能发表评论，否则我会评论@BoltClock 答案。

如果您使用的是 scss，则上述答案将失败，因为 scss 会尝试使用特定于 scss 的 rgba()/hsla() 函数编译样式，该函数需要 4 个参数。不过rgba()/hsla()也是原生的css函数，所以可以使用字符串插值来绕过scss函数。

示例（在 sass 3.5.0+ 中有效）：

 :root {
    --color_rgb: 250, 250, 250;
    --color_hsl: 250, 50%, 50%;
}

div {
    /* This is valid CSS, but will fail in a scss compilation */
    background-color: rgba(var(--color_rgb), 0.5);

    /* This is valid scss, and will generate the CSS above */
    background-color: #{'rgba(var(--color_rgb), 0.5)'};
}

 <div></div>

请注意，字符串插值不适用于非 CSS scss 函数，例如 lighten() ，因为生成的代码不是功能性 CSS。尽管如此，它仍然是有效的 scss，因此您在编译时不会收到任何错误。

原文由 SimplyPhy 发布，翻译遵循 CC BY-SA 3.0 许可协议