css+js整站变灰兼容IE7+

历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的?

重写一套css?NO,即便你有这个时间重写,那网站内的图片怎么办?难道重做一遍?很明显工作量巨大不符合实际。

火狐和chrome浏览器比较简单,直接用css3搞定:

{:;}{:;:; }

对于IE7-IE9浏览器,可以使用IE自带的滤镜,在页面头部内加入样式:

{:; }

前后效果对比:

效果杠杠的,可是切换到IE10或IE11就傻了,IE10/11需要用grayscale.js来解决

刷新页面效果和IE7-IE9下一致了,可是现在切换回IE7、IE8、IE9,又傻眼了,css不起作用了,页面在IE7-9下依然是彩色的!so,我们需要判断IE浏览器版本分别用css、js的方式处理,IE7-9下用css自带的滤镜,IE10-11用处理,那么全兼容的写法是:

{:;}{:;:;:; }

对于跨域的图片变灰暂时还无解,有知道的同学请不腻赐教!

 

本文地址:http://www.cnblogs.com/wangmeijian/p/4324693.html转载请保留出处!

相关文章

问题背景 最近小伙伴提了一个希望提高后台下拉列表可操作性的...
// n位随机数生成 function randomNum(n) { let sString = &...
HTML是HyperText Markup Language的简称,中文名称:超文本标...
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现...
JavaScript 是脚本语言,是一种解释性脚本语言(代码不进行预...
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网...