对于渐变透明度,使用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屋!