对于渐变透明度，使用rgba的CSS变量 [英] Use CSS variables with rgba for gradient transparency

问题描述

在使用透明度指定渐变颜色时，有一种方法可以使用CSS变量，例如

Is there a way to use CSS variables when specifying gradient colors with transparency, e.g.

: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中的单个十六进制值对单个红色，绿色和蓝色组件进行采样。

You can use variables, but you can't sample the individual red, green and blue components from a single hex value in CSS.

如果要使用 rgba （），您需要为每个颜色组件指定一个变量作为十进制值，并引用 rgba（）函数中的每个变量所以：

If you want to use variables with rgba(), you will need to specify a variable for each color component as a decimal value, and reference each variable within the rgba() function like so:

: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));
}

或者，您可以指定整个 rgba 值作为单个变量，但在此情况下您将需要包含alpha：

Alternatively, you can specify the entire rgba() value as a single variable, although you will need to include the alpha in this case:

:root {
  --accent-color: rgba(223, 208, 165, 1);
}

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

这篇关于对于渐变透明度，使用rgba的CSS变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！