css-grayscale

认识

grayscale(1) 是 CSS 中的一个滤镜效果（filter effect），用于将图像或元素的颜色转换为灰度。

grayscale(1) 表示完全灰度，grayscale(0) 表示保留原始色彩
介于 0 和 1 之间的值控制灰度效果

grayscale滤镜原理是通过调整图像颜色饱和度的值的大小
将图像或元素的色彩转化为灰度，最终呈现出黑白灰效果。

语法

filter: grayscale(value);

value 的取值范围是从 0 到 1：

介于 0 和 1 之间的数值都会产生灰度效果
数值越大，颜色越接近灰度，越小则保留更多的颜色


0 表示完全保留原始色彩（无灰度效果）
1 表示完全转换为灰度（黑白图像）

使用示例

/* 将图像转换为完全灰度 */
img {
    filter: grayscale(1);
}

/* 将图像应用部分灰度效果 */
img {
    filter: grayscale(0.5);
}

/* 将图像恢复为原始色彩 */
img {
    filter: grayscale(0);
}
示例解释
filter: grayscale(1);     图像或元素完全变为黑白（灰度）。
filter: grayscale(0.5);   图像或元素显示部分灰度效果，即它的色彩被部分去除。
filter: grayscale(0);     图像或元素原始色彩，没有灰度效果。

实现原理

grayscale 滤镜实现原理基于 HSL（色调、饱和度、亮度）模型

其中主要影响的是图像的 饱和度（Saturation）。具体来说，grayscale 会将图像的饱和度降低，直到最终达到完全的灰度效果（饱和度为 0）。

在进行灰度化时，图像的颜色首先通过转换为 HSL 模式，其中的饱和度部分会被减少

如果将饱和度降到最低（grayscale(1)），图像就会变为灰度图。

部分灰度（如 grayscale(0.5)）则意味着饱和度被部分降低。

浏览器支持性

grayscale() 滤镜被现代浏览器广泛支持，包括：

Google Chrome
Firefox
Safari
Microsoft Edge

👉 需要兼容较旧的浏览器，需要加上前缀

filter: grayscale(1); /* 标准 */
-webkit-filter: grayscale(1); /* Safari 和旧版 Chrome */

应用场景

图像效果：常用于图像处理，例如在网页中使用灰度效果突出显示某些元素。
过渡效果：可用于悬停效果（hover effect），比如将图像在鼠标悬停时转换为灰度或恢复颜色。
UI 元素：可用于图标、按钮等 UI 元素，使其在不同状态下显示不同的视觉效果。

示例

👉鼠标悬停时应用灰度效果

img {
    transition: filter 0.3s ease;
}

img:hover {
    filter: grayscale(1);
}