CSS grayscale() 函数

CSS grayscale() 语法

在 CSS 中，grayscale() 函数一般作为 filter 属性的值，来改变元素的灰度值（比如让彩色变成黑白）。

其中，grayscale() 是通过降低颜色的 “饱和度” 来实现视觉上的 “去色” 效果。

语法：

filter: grayscale(amount);

说明：

amount 表示灰度效果的强度，取值可以是以下 2 种：

百分比：0% 表示保留原图颜色，100% 表示完全灰度（黑白效果）。
数字：0 表示无灰度，1 表示全灰度（和 100% 效果相同）。

如果 amount 超出范围，则浏览器会将其限制在有效范围内。比如 grayscale(150%) 实际等同于 grayscale(100%)。

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

grayscale() 可以与其他滤镜函数（如 blur()、brightness() 等）搭配一起使用。
grayscale() 可以结合 CSS 过渡或 CSS 动画，来实现动态灰度效果。

CSS grayscale() 摘要

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

CSS grayscale() 示例

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

示例 1：grayscale() 实现黑白图片

运行代码

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

页面效果如下图所示。

grayscale() 实现黑白图像

分析：

filter: grayscale(100%) 表示将图片完全转换为灰度效果。其中，img 元素的颜色会被移除，从而显示为黑白效果。

提示: 实际上，“灰色网页” 就是使用 filter: grayscale(100%) 来实现的。

示例 2：grayscale() 结合 CSS 过渡

运行代码

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

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

grayscale() 实现动态灰度过渡 1

grayscale() 实现动态灰度过渡 2

分析：

在这个例子中，我们使用 transition 属性来实现过渡效果。其中，filter: grayscale(0%) 表示初始状态为彩色，然后 filter: grayscale(100%) 表示为完全黑白。

示例 3：grayscale() 结合其他滤镜

运行代码

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

页面效果如下图所示。

grayscale() 结合其他滤镜函数

分析：

filter: grayscale(50%) blur(2px); 表示同时使用了 grayscale() 和 blur()，从而将图像呈现出半灰度、且略微模糊的效果。