CSS滤镜—使整个网页变成灰色

为追思疫情中逝世的同袍们，将4.4日定为了全国哀悼日，这一天，全世界都是“灰”的。当然我们感觉最深应该就是这一天你打开任何网站、软件，都是灰灰的一片。收到几个人的提问：“老师，这些软件、网站全灰的是怎么实现的，难道要全站都改样式？图片也要重新ps一份吗？”，一直还没来得及回答，今天在这里一起给大家回答这个为题。
答案是：否

怎样使整站变灰？

对于web网站、小程序、webapp以及混合app来说，要是全站变成灰色，只需要使用我们css滤镜就可以做到。当然对于css滤镜，各个浏览器的支持以及写法不一致。
firefox和chrome：

html {
    filter: grayscale(80%);/*fire*/
    -webkit-filter:grayscale(80%);/*chrome*/
}

万恶的IE一直是我们做兼容性死对头，对于滤镜同样不缺席：
对于IE6-IE9，同样使用滤镜还是可以做到的。

body{ filter:gray; }/*IE6-IE9，要注意的是必须加在body元素上才有效果*/

至于剩下的IE10、IE11，我们只能借助一个js插件（grayscale.js）实现了
grayscale.js下载
提取码【yac0】

<script src="grayscale.js"></script>
    <script>
        //判断浏览器版本
        function BrowserType() {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 
            var isIE = window.ActiveXObject || "ActiveXObject" in window
            if (isIE) {
                var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                if (userAgent.indexOf('MSIE 6.0') != -1) {
                    return "IE6";
                } else if (fIEVersion == 7) { return "IE7"; }
                else if (fIEVersion == 8) { return "IE8"; }
                else if (fIEVersion == 9) { return "IE9"; }
                else if (fIEVersion == 10) { return "IE10"; }
                else if (userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)) {
                    return "IE11";
                }
                else { return "0" }//IE版本过低
            }//isIE end 

            if (isFF) { return "FF"; }
            if (isOpera) { return "Opera"; }
            if (isSafari) { return "Safari"; }
            if (isChrome) { return "Chrome"; }
            if (isEdge) { return "Edge"; }
        }
        if( BrowserType() == "IE10" ||  BrowserType()=="IE11"){
            grayscale(document.body);
        }
    </script>

关于是整站变灰，就讲到这里，道友们有其他方法的或者建议的，欢迎联系博主。下次再分享滤镜的其他用法。