css+js整站变灰(兼容IE7+) - html/css语言栏目:h

历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的?   重写一套css?NO,即便你有这个时间重写,那网站内的图片怎么办?难道重做一遍?很明显工作量巨大不符合实际。   火狐和chrome 浏览器比较简单,直接用css3搞定:     <style type="text/css"> .demo{color: red;} body {     filter: grayscale(100%);/*火狐*/     -webkit-filter:grayscale(100%);/*chrome*/ } </style> <h1 class="demo">周星星</h1> <img src="zxx.jpg">   对于IE7-IE9浏览器,可以使用IE自带的滤镜,在页面头部内加入样式:   body{ filter:gray; }/*IE7-IE9,必须加在body元素上*/ 前后效果对比:       效果杠杠的,可是切换到IE10或IE11就傻了,IE10/11需要用grayscale.js来解决:   <script type="text/javascript" src="grayscale.js"></script> <script type="text/javascript"> grayscale(document.body); </script> 刷新页面,效果和IE7-IE9下一致了,可是现在切换回IE7、IE8、IE9,又傻眼了,css不起作用了,页面在IE7-9下依然是彩色的!so,我们需要判断IE浏览器版本分别用css、js的方式处理,IE7-9下用css自带的滤镜,IE10-11用grayscale.js处理,那么全兼容的写法是:     <style type="text/css"> .demo{color: red;} body{     filter: grayscale(100%);/*火狐*/     -webkit-filter:grayscale(100%);/*chrome*/     filter:gray; /*IE7-9*/ } </style> <h1 class="demo">周星星</h1> <img src="zxx.jpg"> <script type="text/javascript" src="grayscale.js"></script> <script type="text/javascript"> var navStr = navigator.userAgent.toLowerCase(); if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11     grayscale(document.body); } </script>
返回顶部
跳到底部

Copyright 2011-2024 南京追名网络科技有限公司 苏ICP备2023031119号-6 乌徒帮 All Rights Reserved Powered by Z-BlogPHP Theme By open开发

请先 登录 再评论,若不是会员请先 注册