如何解决使用纯 CSS 使 RGB 变亮 我尝试过的事情
使用纯 CSS 如何使 RGB 变亮,例如:rgb(255,0)
SASS 的 lighten
mixin 运行良好:lighten(rgb(255,0),25%)
但是它不支持这样的 CSS 变量:lighten(var(--redColor),25%)
我需要使用 CSS 变量,因为您可以在页面加载后即时更改 CSS 变量。
我尝试过的事情
-
opacity: 0.75
- 不透明度使背景渗入我不想要的颜色。 -
filter: brightness(
- 过滤器会影响整个元素,但我只想使特定颜色变亮。 -
hsl(0,100%,50%)
- HSL 看起来很有希望,但我需要一种方法将 RGB 转换为 HSL 以减轻 RGB。
理想情况下,我希望有一个 SASS mixin,它可以做一些 CSS 来减轻传递给它的任何颜色。
解决方法
这不可能。
不过
使用 hsl
使颜色变亮非常容易,因此如果您像这样将 hsl
颜色与 RGB 一起存储:
:root {
--redColor: 142,49,42;
--redColor_h: 4;
--redColor_s: 54%;
--redColor_l: 36%;
}
然后你可以用这个 SASS mixin 来淡化颜色:
@function lighten($shadeCode,$amount) {
@return hsl(var(--#{$shadeCode}_h),var(--#{$shadeCode}_s),calc(#{var(--#{$shadeCode}_l)} + #{$amount}));
}
像这样使用它:
background-color: lighten('redColor',25%);
繁荣,你的颜色变浅了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。