实现图像灰度(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的浏览器兼容情况如下图所示。