CSS | saturate()函数

CSS中的saturate()函数用于调整图像的饱和度。下面将详细介绍该函数的使用。

语法

saturate( percentage )

参数说明：

• percentage：数值类型，饱和度的百分比值。取值范围为0%~100%。

示例

1. 基本用法

img {
  filter: saturate(50%);
}

上述代码表示将图片的饱和度设置为原来的50%。

2. 叠加使用

img {
  filter: grayscale(100%) saturate(50%);
}

上述代码表示将图片先转换为黑白图像，然后将饱和度设置为原来的50%。

注意事项

• saturate()函数仅在支持CSS滤镜的浏览器中生效，如Chrome、Firefox等。
• 参数取值为0%时，图像会变成黑白图像。
• 参数取值为100%时，图像不会有任何变化。
• saturate()函数可与其他CSS滤镜函数叠加使用，以达到不同效果。

总结

CSS | saturate()函数在调整图像饱和度方面提供了便利性。在现代浏览器中，越来越多的网站开始使用滤镜来为图片增色。同时，通过组合多个不同的滤镜，可以实现复杂的效果。