本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！
大家好，我是大澈！
本文约 1100+ 字，整篇阅读约需 2 分钟。
今天分享一段优质 CSS 代码片段，应用灰度效果，让页面变成黑白显示。
老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！
body {
filter: grayscale(1); // 1相当于100%
}
分享原因
这段代码展示了如何使用 CSS 滤镜来将整个网页变为灰度效果。
在特殊的日子里，网页有整体变灰色的需求，可以使用这段代码，这个需求很有必要。
再就是做一些老照片或黑白电影的效果，也可以使用这段代码。
代码解析
1. 选择器 body
这一部分选择了 HTML 文档的 <body> 元素，即整个网页的主体。
CSS 的 filter 属性通常用于图像，但也可以应用到其他任何 HTML 元素上。
2. grayscale(1);
grayscale 滤镜将元素的颜色变成灰度效果。
参数 1 表示 100% 灰度，参数 0 表示无灰度效果。
3. filter 所有属性值 大盘点！
CSS 的 filter 属性提供了多种图形效果，且这些属性值可以组合用起来，且可以应用于任何元素。
以下是 filter 属性的所有值及其详细解释：
blur()
功能：应用模糊效果。
参数：接受一个长度值（如 px、em），默认值是 0。
示例：filter: blur(5px);
brightness()
功能：调整图像的亮度。
参数：接受一个数值，1 为原始亮度。值小于 1 会降低亮度，值大于 1 会增加亮度。
示例：filter: brightness(0.5);
contrast()
功能：调整图像的对比度。
参数：接受一个数值，1 为原始对比度。值小于 1 会降低对比度，值大于 1 会增加对比度。
示例：filter: contrast(200%);
drop-shadow()
功能：应用阴影效果。
参数：类似于 box-shadow，包括偏移量、模糊半径和颜色。
示例：filter: drop-shadow(10px 10px 10px #000);
grayscale()
功能：将图像变为灰度。
参数：接受一个 0 到 1 之间的数值，0 为无灰度，1 为完全灰度。
示例：filter: grayscale(1);
hue-rotate()
功能：旋转图像的色相。
参数：接受一个角度值，单位为度（deg）。
示例：filter: hue-rotate(90deg);
invert()
功能：反转图像的颜色。
参数：接受一个 0 到 1 之间的数值，0 为无效果，1 为完全反转。
示例：filter: invert(1);
opacity()
功能：调整图像的透明度。
参数：接受一个 0 到 1 之间的数值，0 为完全透明，1 为完全不透明。
示例：filter: opacity(0.5);
saturate()
功能：调整图像的饱和度。
参数：接受一个数值，1 为原始饱和度。值小于 1 会降低饱和度，值大于 1 会增加饱和度。
示例：filter: saturate(2);
sepia()
功能：将图像变为棕褐色。
参数：接受一个 0 到 1 之间的数值，0 为无效果，1 为完全棕褐色。
示例：filter: sepia(1);
url()
功能：引用 SVG 滤镜。
参数：接受一个 URL，指向一个包含 SVG 滤镜的文件。
示例：filter: url(#filter-id);
- end -
2130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
