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