使用CSS变量和rgba函数实现渐变透明度

Question

有没有办法在指定带透明度的渐变颜色时使用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));
}

- Manish

Answer 1

您可以使用变量，但在CSS中无法从单个十六进制值中采样红色、绿色和蓝色组件。

如果您只是想将 alpha 组件应用于现有的 RGB 三元组，您可以指定整个三元组作为逗号分隔的十进制值列表，而不是一个十六进制值，并将其直接替换为 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));
}

- BoltClock

---

我假设浏览器支持不是问题，但如果有人想知道，目前只有Firefox实现了级联变量。 - BoltClock

我怀疑即使这样也可能不行。你可以替换整个颜色值，但是如果要从可变组件中合成颜色，你需要类似于calc()在颜色空间内的一些东西。 - c-smile

@c-smile：在样式声明var()中，可以出现值的任何部分，只要值替换结果是有效的声明（请参见http://www.w3.org/TR/css-variables-1/#using-variables）。确实，[它在唯一的当前实现上运行](http://jsfiddle.net/BoltClock/f5drrLph)。 - BoltClock

@c-smile: 从规范链接中可以看出："如果属性包含一个或多个var()函数，并且这些函数在语法上是有效的，那么必须假定整个属性的语法在解析时是有效的。它只在计算值时间进行语法检查，在var()函数被替换后。"所以就rgb()/rgba()语法而言，它看到的只是在替换后的rgba(223, 208, 165, 1)。如果其中一个变量超出了0-255范围的数字或根本不是数字，则在替换该值后，该值将变得无效。 - BoltClock

@c-smile：（你可能是想说低效而不是无效。）没错——Mozilla还没有对性能方面发表评论。他们可能还不担心这个问题，或者已经对其进行了优化。 - BoltClock

Answer 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变量，并在大多数项目中使用它。

- Aurélien B.