跨浏览器图像灰度(grayscale)解决方案

前端开发whqet,csdn,王海庆,whqet,前端开发专家

实现图像灰度（grayscale）最初有ie4推出的专属属性filter实现，后来在css3里w3c实现了标准的filter，不过不同浏览器的实现程度不一样，因此现阶段我们必须探索一种浏览器兼容的解决方案。

1.IE私有滤镜的方式

自IE4开始，IE引入了私有滤镜，可以实现透明度、模糊、阴影、发光等效果，当然也可以实现灰度图像效果。代码如下

img {  
    filter: gray; /* just for IE6-9 */  
}  

IE10开始抛弃了这种私有滤镜，但是还没有提供对标准CSSfilter的支持，所以说IE10以上版本的灰度图像，仍然是一个问题。

2.W3c CSS filter方式

CSS3中借鉴IE私有滤镜的方式提供了标准的CSS Filter方案，里面可以支持grayscale灰度、sepia褐色、saturate饱和度、hue-rotate色相旋转、invert反色、opacity透明度、brightness亮度、contrast对比度、blur模糊、drop-shadow阴影等十种效果。关于CSS3 Filter大家可以参照以下教程：大漠的《 CSS3 Filter的十种特效》和Adobe的《 CSS Filter Lab》。

实现grayscale灰度图像的代码是这样的

img{
 -webkit-filter: grayscale(100%);    /* webkit内核支持程度较好 */
    -moz-filter: grayscale(100%);    /* 其他内核现在并不支持，为了将来兼容性书写 */
     -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
         filter: grayscale(100%);    /* 标准写法 */
}

其中grayscale（）的取值为0%-100%，也可以用0-1取代，0%代表彩色图像，100%代表完全的灰度。

css filter的浏览器兼容情况如下，Chrome31+，Safari7+，Opera20+，ios Safari6+,Android Browser4.4+,Blackberry 10+均支持了-webkit-filter的方式，IE不支持，firefox不支持。

因此我们需要考虑IE和firefox的兼容方案，好在对于firefox来说支持SVG effects for HTML 方式，接下来我们予以介绍。

3.SVG effects for HTML方式

Firefox虽说不支持css filter，但是支持svg effects for html，html文件可以调用svg里面的效果，不仅仅是滤镜、还可以是mask、clip等，详细内容大家可以参照MDN上的一片文章《 Applying SVG effects to HTML content》。

svg effects for html的浏览器兼容情况如下图所示。