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 windowif (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>

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