小编Vik*_*tor的帖子

CSS变量计算HSL值

我想要一个基本的 HSL 颜色值,我想将其实现为渐变,如下所示:

: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));
}
Run Code Online (Sandbox Code Playgroud)

上面的代码产生了一个透明的对象,我无法理解为什么,请帮忙!

css hsl colors css-variables css-calc

6
推荐指数
1
解决办法
4477
查看次数

标签 统计

colors ×1

css ×1

css-calc ×1

css-variables ×1

hsl ×1