使用带有rgba的CSS变量来实现渐变透明度

在指定具有透明度的渐变颜色时,有没有办法使用CSS变量,例如

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

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

解决方法

您可以使用变量,但不能从CSS中的单个十六进制值中采样单个红色,绿色和蓝色组件.

如果要将变量与rgba()一起使用,则需要为每个颜色分量指定一个变量作为十进制值,并引用rgba()函数中的每个变量,如下所示：

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

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

或者,您可以将整个rgba()值指定为单个变量,但在这种情况下您需要包含alpha：

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

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