四川雅安发生地震后,很多大型的娱乐网站在一些版块页面都会挂上网站变灰代码以表示哀悼!
这个页面文章区域已挂上灰色代码,如果你能看到本页文章区域在各浏览器下显示灰色,说明代码已生效,用到的代码无非就是下面的一段css样式定义,觉得有用的可继续看下面的代码展示:
html{-webkit-filter:grayscale(1);filter:url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
当然上述的html标签,你可以改成任何其它标签元素或标签对应的id或class名!
-webkit-filter是css3新加的属性,很强大但可惜的是目前只有chrome(webkit内核)才支持,连firefox(gecko内核)也不支持,所以firefox的要另写svg来实现灰色效果兼容;ie的浏览器前面2个都不支持,又要使用只有ie才支持的滤镜属性filter:progid xxxx 才能勉强实现该灰色效果!
吐槽下:不是说好了要推行w3c标准的吗?!到头来还不是各搞各的一套模式, 我了个去!!
就算统一了,届时某个又创造了另一个规范。。。