为追思疫情中逝世的同袍们,将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>
关于是整站变灰,就讲到这里,道友们有其他方法的或者建议的,欢迎联系博主。下次再分享滤镜的其他用法。