2014年8月

很好,这篇主要是mark用,方便以后再翻阅


首先是用到CSS的filter属性,最开始貌似是IE4开始加的私有属性,可以实现透明、模糊、阴影、发光、灰度等效果,代码是长这样式儿的:


filter: gray /* IE6 - IE9 */



再后来IE10就开始抛弃这个属性了,但是CSS3借鉴了这个做法,标准的CSS Filter方案里面可以支持grayscale灰度、sepia褐色、saturate饱和度、hue-rotate色相旋转、invert反色、opacity透明度、brightness亮度、contrast对比度、blur模糊、drop-shadow阴影等十种效果,然后代码是长这样式儿的:


filter: grayscale(100%);    /* 标准写法 */ 


然后对各个浏览器再单独加前缀


css filter的浏览器兼容情况是这样的: 

        Chrome31+,

        Safari7+,

        Opera20+,

        ios Safari6+,

        Android Browser4.4+,

        Blackberry 10+均支持了-webkit-filter的方式,

但是:

        IE不支持,firefox不支持


再然后呢,Firefox虽说不支持css filter,但是支持svg effects for html,html文件可以调用svg里面的效果,不仅仅是滤镜、还可以是mask、clip等

然后呢,Firefox下我们可以写成这样的:


filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://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"); /* Firefox 3.5+ */


很好,现在就只剩下 IE10 和 IE11 了,那么有什么办法呢?


呵呵,很高兴的告诉你,CSS不行!


但是我们可以用js

http://james.padolsey.com/demos/grayscale/grayscale.js

这个插件,引进来以后用

grayscale(document.body);

执行生效

但是 ---- 注意!!!!!

这货执行起来非常的慢,并且后面如果后续的动态修改的dom是不生效的,所以不建议使用


然后那我们的CSS就可以写成这样:


html {
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://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"); /* Firefox 3.5+ */
        -webkit-filter: grayscale(100%); /* chrome+ */
        filter: grayscale(100%); /* 未来浏览器 */
        filter: gray; /* ie6-8 */
        filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/*ie6-9 */
}


恩恩,大概就长这样儿,不兼容 IE10 和 IE11



貌似还有几个jQuery的插件,但是没有去试,如果有发现好的欢迎留言告诉我~

最后,为鲁甸祈福~