将 CSS 变量与 rgba 一起使用以获得渐变透明度
Use CSS variables with rgba for gradient transparency
在指定具有透明度的渐变颜色时,是否可以使用 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));
}
您可以使用变量,但不能从 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 值,则需要为每个颜色分量指定一个变量作为十进制值,并在 [= 中引用每个变量12=] 函数如下:
: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 都说了,但是如果你的项目有一个 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 变量,并在我的大多数项目中使用它。
在指定具有透明度的渐变颜色时,是否可以使用 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));
}
您可以使用变量,但不能从 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 值,则需要为每个颜色分量指定一个变量作为十进制值,并在 [= 中引用每个变量12=] 函数如下:
: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 都说了,但是如果你的项目有一个 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 变量,并在我的大多数项目中使用它。