CSS filter实现页面变灰效果

CSS filter实现页面变灰效果

2020.4.4
什么也不说了，大家都懂。值得注意的是，同一天包括CSDN在内的一些网站，里面内容都变成了灰色效果。
本小白一开始还以为这会是个很麻烦的功能，经大佬们介绍，发现原来只需要利用CSS的filter属性即可简单实现，在这里记录一下。
filter相当于CSS中的滤镜属性，能将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
filter包含了一些已实现预定义效果的函数，如

url()：接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素；
blur()：给图像设置高斯模糊；
brightness()：给图片设置明暗程度；
contrast()：调整图像的对比度；
drop-shadow()：给图像设置一个阴影效果；
grayscale()：将图像转换为灰度图像；
hue-rotate()：给图像应用色相旋转；
invert()：反转输入图像；
opacity()：转化图像的透明程度；
saturate()：转换图像饱和度；
sepia()：将图像转换为深褐色；

当然，我们是可以组合任意数量的函数来控制渲染的。
因为是小白初次接触不宜多说，而且在MDN已经有了相当详尽的介绍和demo例子，有兴趣的朋友可以去瞧瞧。