码迷,mamicode.com
首页 > Web开发 > 详细

css+js网站变灰

时间:2020-04-03 19:53:11      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:chrome   text   agent   页面   useragent   demo   index   red   滤镜   

历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命
重写一套css?NO,即便你有这个时间重写,那网站内的图片怎么办?难道重做一遍?很明显工作量巨大不符合实际。
火狐和chrome浏览器比较简单,直接用css3搞定:

<style type="text/css">
body {
    filter: grayscale(100%);/*火狐*/
    -webkit-filter:grayscale(100%);/*chrome*/
}
</style>
<body>
  <div style="color: red;">这是一段文字</div>
  <img src="./price_19.png" alt="">
</body>

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

body{ filter:gray; }/*IE7-IE9,必须加在body元素上*/

IE10/11需要用grayscale.js来解决:

<script src="grayscale.js"></script>
<script>
grayscale(document.body);
</script>

可是现在切换回IE7、IE8、IE9,css不起作用了,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>
<body>
  <div style="color: red;">这是一段文字</div>
  <img src="./price_19.png" alt="">
</body>
<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>

css+js网站变灰

标签:chrome   text   agent   页面   useragent   demo   index   red   滤镜   

原文地址:https://www.cnblogs.com/shemingxin/p/12628490.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!