将 CSS 变量与 rgba 一起使用以实现渐变透明度答案

【问题标题】：Use CSS variables with rgba for gradient transparency将 CSS 变量与 rgba 一起使用以实现渐变透明度
【发布时间】：2015-06-17 22:41:19
【问题描述】：

在指定具有透明度的渐变颜色时，是否可以使用 CSS 变量，例如

:root {
  --accent-color: #dfd0a5;
}

h1{
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(red(var(--accent-color)), green(var(--accent-color)), blue(var(--accent-color)), 1));
}

【问题讨论】：

标签： css css-variables

【解决方案1】：

您可以使用变量，但不能从 CSS 中的单个十六进制值中采样单个红色、绿色和蓝色分量。

如果您只是想将 alpha 分量应用于现有的 RGB 三元组，您可以用specify the entire triplet as a comma-separated list of decimal values 代替十六进制值，并将其作为单个不透明标记直接替换到rgba() 函数中：

:root {
  --accent-color: 223, 208, 165;
}

h1 {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(var(--accent-color), 1));
}

如果您想使用rgba() 指定和控制单独的 R、G 和 B 值，则需要为每个颜色分量指定一个变量作为十进制值，并像这样在 rgba() 函数中引用每个变量：

:root {
  --accent-red: 223;
  --accent-green: 208;
  --accent-blue: 165;
}

h1 {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(var(--accent-red), var(--accent-green), var(--accent-blue), 1));
}

【讨论】：

我假设浏览器支持在这里不是问题，但如果有人想知道，only Firefox implements cascading variables at the moment。
我怀疑这是否可行。您可以替换整个颜色值，但要从可变组件合成颜色，您将需要 calc() 之类的东西，但在颜色空间中。
@c-smile: 只要值替换产生有效的声明，样式声明var() 中的值的哪些部分可以出现没有限制（参见w3.org/TR/css-variables-1/#using-variables)。果然，it works on the only current implementation.
@c-smile：来自规范链接：“如果一个属性包含一个或多个 var() 函数，并且这些函数在语法上有效，则必须假定整个属性的语法在解析时有效时间。它只在计算值时间进行语法检查，在 var() 函数被替换之后。因此，就rgb()/rgba() 语法而言，在执行替换之后，它所看到的只是rgba(223, 208, 165, 1)。如果其中一个变量是 0-255 范围之外的数字，或者根本不是数字，则替换该值后该值将变为无效。
@c-smile：（您的意思可能是低效，而不是低效。）确实 - Mozilla 没有就性能方面发表评论。要么他们还不担心它，要么他们能够优化它。

【解决方案2】：

@boltclock 说明了一切，但如果您的项目有 scss 预处理器，您可以节省一点时间。

你可以做一些调整来实现你想要的：

// Scss
@mixin defineColorRGB ($color, $red, $green, $blue) {
    #{$color}: unquote("rgb(#{$red}, #{$green}, #{$blue})");
    #{$color}-r: #{$red};
    #{$color}-g: #{$green};
    #{$color}-b: #{$blue};
}

然后在你的 css 中，你可以这样做：

::root {
    @include defineColorRGB(--accentColor, red(#dfd0a5), green(#dfd0a5), blue(#dfd0a5));
}

您最终会得到 4 个不同的 css 变量，一个用于您的颜色，一个用于每个颜色通道。

然后你几乎可以像你写的那样使用它：

h1{
    background: linear-gradient(
        to right, rgba(255, 255, 255, 0),
        rgba(var(--accent-color-r), var(--accent-color-g), var(--accent-color-b), 1)
    );
}

我发现它是一种非常方便的方式来初始化我的 css 变量，并在我的大多数项目中使用它。

【讨论】：