每当遭遇重大灾难，比如之前的非典、汶川地震，以及前几天清明节对新冠肺炎逝世同胞的哀悼，各大主流网站也会呈黑白两色。今天偶然搜了下实现机制，原来是如此的简单，也对之前不怎么了解的滤镜刮目相看了。
将以下样式代码放到页面中即可实现页面黑白处理，这是CSS3滤镜中的灰度滤镜（grayscale）。
html,body {
-webkit-filter: grayscale(1); /* Chrome, Safari, Opera */
filter: grayscale(1);
}比如百度站点灰度处理后如下图效果：
附1：其它常用滤镜类型
| 滤镜代码 | 滤镜名称 | 说明 |
|---|---|---|
| blur(px) | 模糊滤镜 | 参数接受一个像素长度值，表示像素融合半径 |
| brightness(%|number) | 亮度滤镜 | 参数接受一个小数或百分比，默认是1或100%（无变化），值越小越暗 |
| contrast(%|number) | 对比度滤镜 | 参数接受一个小数或百分比，默认是1或100%（无变化），值越小对比度越低 |
| drop-shadow(h-shadow v-shadow blur spread color) | 阴影滤镜 | 接受5个参数： h-shadow：水平距离阴影偏移量 v-shadow：垂直距离阴影偏移量 blur：模糊半径，值越大越模糊 spread：阴影调节参数，正值阴影变大，负值缩小 color：阴影颜色 |
| hue-rotate(deg) | 色相旋转滤镜 | 参数接受一个角度值，超过360度后循环旋转 |
| invert(%|number) | 反色滤镜 | 参数接受一个小数或百分比，值越大翻转程度越高 |
| opacity(%|number) | 透明度滤镜 | 参数接受一个小数或百分比，值越小越透明 |
| saturate(%|number) | 饱和度滤镜 | 参数接受一个小数或百分比，值越小越不饱和 |
附2：常用滤镜类型案例
img.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
img.brightness {
-webkit-filter: brightness(0.30);
filter: brightness(0.30);
}
img.contrast {
-webkit-filter: contrast(180%);
filter: contrast(180%);
}
img.shadow {
-webkit-filter: drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
}
img.huerotate {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
img.invert {
-webkit-filter: invert(100%);
filter: invert(100%);
}
img.opacity {
-webkit-filter: opacity(50%);
filter: opacity(50%);
}
img.saturate {
-webkit-filter: saturate(7);
filter: saturate(7);
}