CSS saturate() 函数

CSS saturate() 语法

在 CSS 中，saturate() 函数一般作为 filter 属性的值，用于改变元素的饱和度。简单来说，它可以将颜色变得更加鲜艳，或者变得更加灰暗。

语法：

filter: saturate(value);

说明：

value 表示饱和度的调整值，取值可以是以下 2 种。

百分比：100% 表示原始饱和度，0% 表示完全灰度，200% 表示双倍饱和度。
数字：1 表示原始饱和度，0 表示完全灰度，2 表示双倍饱和度。

注意: saturate() 不支持负值。如果设置为负数，则该声明会被浏览器忽略（视为无效）。

对于 saturate() 函数，小伙伴们还需要清楚以下几点。

saturate() 只会改变视觉效果，而不会影响元素的尺寸、布局等。
saturate() 设置过高的饱和度，可能导致颜色失真，在使用的时候要特别谨慎。
saturate() 可以与其他滤镜函数搭配一起使用，比如 saturate()、drop-shadow() 等。

CSS saturate() 摘要

属于	CSS 滤镜
使用频率	低
兼容性	查看
官方文档	查看
MDN	查看

CSS saturate() 示例

接下来，我们通过几个简单的例子来讲解一下 CSS saturate() 函数是如何使用的。

示例 1：saturate() 改变饱和度

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img {
            filter: saturate(200%);
        }
    </style>
</head>
<body>
    <img src="imgs/bird.jpg" alt="">
</body>
</html>

页面效果如下图所示。

saturate() 基本用法

分析：

filter: saturate(200%) 表示将图片的饱和度改变为原来的 2 倍，这样会导致图片最终看起来更加鲜艳。

示例 2：saturate() 实现灰度效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img {
            filter: saturate(0%);
        }
    </style>
</head>
<body>
    <img src="imgs/bird.jpg" alt="">
</body>
</html>

页面效果如下图所示。

saturate() 实现灰度效果

分析：

filter: saturate(0%) 表示将图片的饱和度被降为 0，这样会导致图像呈现出完全灰度效果。实际上，下面 2 种方式都可以实现灰度效果。

/* 方式 1 */
filter: saturate(0%);

/* 方式 2 */
filter: grayscale(100%);

示例 3：saturate() 结合 CSS 过渡

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img {
            filter: saturate(100%);
            transition: filter 0.5s ease;
        }
        img:hover {
            filter: saturate(300%);
        }
    </style>
</head>
<body>
    <img src="imgs/bird.jpg" alt="">
</body>
</html>

默认情况下，页面效果如下图 1 所示。当鼠标移到图片上时，页面效果如下图 2 所示。

saturate() 结合过渡实现动态效果 1

saturate() 结合过渡实现动态效果 2

分析：

在这个例子中，我们首先使用 filter: saturate(100%); 来设置图像的默认饱和度为 100%。当鼠标移到元素上时，我们再使用 filter: saturate(300%) 设置其饱和度为 300%。