CSS lighten函数介绍

简介

CSS lighten 函数可以用于将颜色的亮度增加指定的数值。它是Sass和Less等CSS预处理器中常用的函数，但也可以在原生CSS中使用。这个函数可以让程序员在网页中自由地操纵颜色，使得设计更加灵活。

语法

lighten函数的语法如下：

lighten(color, amount)

其中：

• color：必须是一个有效的颜色值，可以是十六进制、RGB、RGBA、HSL、HSLA格式，或者是一个颜色关键词（如red、blue等）。
• amount：必须是一个0到100之间的数字，表示增加的亮度程度。0表示不增加亮度，100表示完全增加亮度。

示例

下面是一些使用lighten函数的示例：

/* 将一个十六进制颜色值变得更亮 */
color: lighten(#36c, 20%);

/* 将一个RGBA颜色值变得更亮 */
color: lighten(rgba(255, 0, 0, 0.5), 30%);

/* 将一个HSLA颜色值变得更亮 */
color: lighten(hsla(350, 100%, 50%, 0.8), 50%);

兼容性

lighten函数是Sass的原生函数，但可以通过编译器编译成通用的CSS代码。因此，它的兼容性并不取决于浏览器，而是取决于CSS预处理器及其编译器的兼容性。在原生CSS中，lighten函数可以使用的浏览器如下：

• Chrome：49+
• Firefox：52+
• Safari：9+
• Opera：36+
• Edge：16+
• IE：不支持

总结

CSS lighten 函数是一个十分实用的CSS颜色函数，可以用于增加颜色的亮度。程序员可以根据使用场景和需要，选择不同格式的颜色值进行使用，并根据需求调整亮度增加的程度，来达到自己想要的颜色效果。