一个css属性让页面变成黑白色之CSS3 filter(滤镜) 属性

2020年是不平凡的一年，在此缅怀一下在抗击新冠肺炎中牺牲的烈士和因为新冠肺炎去世的同胞们，有时候我们需要让网站的页面变成黑白色彩的，只需要一个css属性filter属性即可：

filter 属性定义了元素的可视效果，主要使用在img上或者页面切换显示的效果，如黑白色彩等：

CSS 语法

filter可以设置的属性值如下：
none ：不设置
blur(npx):为元素设置模糊度(相当于给元素打个马赛克) ，设置的数值越高越模糊；
brightness(%)：相当于给元素设置黑暗度，值可以是百分比也可以是小数数值，0为彻底黑色 ，1为黑色，高于1会出现模糊白现象；
contrast(%) ：相当于设置元素的灰白度；
drop-shadow(h-shadow v-shadow blur spread color) ：为元素设置阴影，类似于box-shadow；
grayscale(%) :设置元素的灰白度，也就是将页面设置成为黑白色的属性；
hue-rotate(deg) ：值为度数，官方给出的是给图像应用色相旋转，然实测是改变了一下颜色，目前没发现有什么用。。。
invert(%) ：官方给出的是反转输入图像。值定义转换的比例，实测感觉就是灰暗程度的变化；
opacity() ：转化元素的透明度，相当于opacity属性；
saturate() ：转换图像饱和度。值定义转换的比例；
sepia() ：将图像转换为深褐色。值定义转换的比例。
url()：URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。

filter属性可以设置复合函数来控制对元素的渲染,如下

filter: contrast(175%) brightness(3%)