通过css实现页面黑白效果

前言：

        临近下班，接到上级通知，为了缅怀今日逝世的英雄；需要对网站进行微调整—— 整个页面呈现出黑白效果

实现：

        css的filter（滤镜）属性  

 filter可以设置的属性值有：

        - none:默认值、没有效果

        - blur(px):为元素设置模糊度，设置的值越高越模糊（不接受百分比值）

        - brightness(%):设置亮暗度，0%图案全黑、100%图像无变化、>100%图像更亮

        - contrast(%):设置元素的灰白度，0%元素全灰、100%元素无变化、>100%元素更白

        -drop-shadow(h-shadow v-shadow blur spread color):设置阴影效果,类似box-shadow

        -grayscale(%):将元素转换为灰白度图像。取值范围（0%-100%或0-1）

        -hue-rotate(deg)：

        -invert(%)：反转输入图像

        -opacity(%):转化元素的透明度，相当于opacity属性

        -saturate(%):转换元素饱和度

        -sepia(%):将图片转化为深褐色

        -url()：URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素

可以同时使用多个滤镜，每个滤镜用空格隔开

例：

img {
    -webkit-filter: contrast(200%) brightness(150%);  /* Chrome, Safari, Opera */
    filter: contrast(200%) brightness(150%);
}

通过js修改属性时：document.body.style.WebkitFilter="grayscale(100%)"