网站快速变灰
在伟人离世或者重大悼念活动时，网站往往会全面变灰，包括文字、图片等等，文字颜色、背景颜色可以通过调整CSS进行改变，但是图片重新制作是很耗费时间，而通过CSS滤镜可以使网页快速变灰。
# 代码
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 原理
CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
filter的子属性grayscale()可以对图片进行灰度转换，当值为 100% 时，灰度最大。0% 时与原图没有区别。0% 到 100% 之间的值会使灰度线性变化。
将filter属性放在根元素<html>上，确保整个页面全部变灰。
文章更新于: 2022/12/01 16:04:41