今日头条 焦点资讯 营销之道 企业报道 淘宝运营 网站建设 软件开发 400电话
  当前位置: 首页 » 资讯 » 网站建设 » 正文

网站变灰代码 兼容主流浏览器 为灾区祈祷

放大字体  缩小字体 发布日期:2018-02-18  来源:新格网  作者:新格网  浏览次数:367  【去百度看看】
核心提示:今天有很多网站的首页都变灰了,我们也找了很多变灰的方法,但是网上的大部分都不能够实现现在浏览器的兼容问题。这里我们找到一个CSS和一个JS代码,可以同时支持除IE10(我这边测试不变会)以为其它浏览器,IE6、IE7、IE8、IE9、谷歌浏览器、Opera、猎豹浏览器、360浏览器、傲游浏览器等主流浏览器。

首先,为雅安地震灾区遇难同胞默哀!

今天有很多网站的首页都变灰了,我们也找了很多变灰的方法,但是网上的大部分都不能够实现现在浏览器的兼容问题。这里我们找到一个CSS和一个JS代码,可以同时支持除IE10(我这边测试不变会)以为其它浏览器,IE6、IE7、IE8、IE9、谷歌浏览器、Opera、猎豹浏览器、360浏览器、傲游浏览器等主流浏览器。

下面这段代码支持IE6到IE9和谷歌内核浏览器:

html{filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-

filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);

filter: url("data:image/svg+xml;utf8, filter: url("data:image/svg+xml;utf8, \'grayscale\'> \'grayscale\'> 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/> #grayscale");

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: 

grayscale(1);}

html{filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-

filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);

filter: url("data:image/svg+xml;utf8,\'grayscale\'>0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/>#grayscale");

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: 

grayscale(1);}

另外Opera浏览器貌似不可以,就需要用到这段JS代码:

直接复制就可以用的,这两段代码基本上兼容了现在大部分浏览器,比那些其它的被复制了N遍的老代码好多了!效果展示:http://www.94897.com/

 
 
[ 资讯搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 违规举报 ]  [ 关闭窗口 ]

 
0条 [查看全部]  相关评论

 
网站首页 | 关于我们 | 联系方式 | 使用协议 | 版权隐私 | 网站地图 | 排名推广 | 广告服务 | 积分换礼 | 网站留言 | RSS订阅 | 吉ICP备11001726号-6
企业800网 · 提供技术支持