HSL值的CSS变量计算 [英] CSS variable calculation of HSL values
本文介绍了HSL值的CSS变量计算的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想要一个基本的HSL颜色值,我希望将其实现为如下渐变:
I want to have a basic HSL color value which I want to implement as a gradient as follows:
:root {
--hue: 201;
--saturation: 31;
--lightness: 40;
--mainColor: hsl(var(--hue),var(--saturation),var(--lightness));
--difference: 20; /* 0 + --difference < --lightness < 100 - --difference */
--lightnessPlus: calc(var(--lightness) + var(--difference));
--colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus));
--lightnessMinus: calc(var(--lightness) - var(--difference));
--colorTo: hsl(var(--hue),var(--saturation),var(--lightnessMinus));
}
[...]
.class {
background-image: linear-gradient(to right, var(--colorFrom), var(--colorTo));
}
上面的代码产生一个透明的对象,我不明白为什么,请帮忙!
The above code produces a transparent object and I fail to comprehend why, please help!
推荐答案
您缺少百分比.语法应为 hsl(h,s%,l%)
( https://drafts.csswg.org/css-color-3/#hsl-color )
You are missing percentages. the syntax should be hsl(h, s%, l%)
(https://drafts.csswg.org/css-color-3/#hsl-color)
:root {
--hue: 201;
--saturation: 31%; /* here */
--lightness: 40;
--mainColor: hsl(var(--hue),var(--saturation),var(--lightness));
--difference: 20;
--lightnessPlus: calc((var(--lightness) + var(--difference))*1%); /* here */
--colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus));
--lightnessMinus: calc((var(--lightness) - var(--difference))*1%); /* here */
--colorTo: hsl(var(--hue),var(--saturation),var(--lightnessMinus));
}
body {
background-image: linear-gradient(to right, var(--colorFrom), var(--colorTo));
}
或
:root {
--hue: 201;
--saturation: 31%; /* here */
--lightness: 40%; /* here */
--mainColor: hsl(var(--hue),var(--saturation),var(--lightness));
--difference: 20%; /* here */
--lightnessPlus: calc(var(--lightness) + var(--difference));
--colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus));
--lightnessMinus: calc(var(--lightness) - var(--difference));
--colorTo: hsl(var(--hue),var(--saturation),var(--lightnessMinus));
}
body {
background-image: linear-gradient(to right, var(--colorFrom), var(--colorTo));
}
这篇关于HSL值的CSS变量计算的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文