HTML如何让图片在灰白以及彩色之间变幻
 

HTML如何让图片在灰白以及彩色之间变幻
2013/11/18
许丰军
-

让彩色图片变为灰白色,第一时间我会想到用IE的滤镜测试发现只有IE支持,那如何兼容其他的浏览器呢?现在市场上主流的三大内核,Trident(IE内核)/Webkit(Google内核)/Gecko(Firefox内核)IE可以用filter:gray;就可以解决大家如果有了解,会发现现在CSS 3中有个新的属性,filter(滤镜),其中有个属性grayscale();测试可以得知,在webkit内核下用-webkit-filter:grayscale(1);可以变灰那Firefox如何处理呢?经过查找各种资料,用JS模拟的居多,昨天提到一个叫svg强大的技术,是的,Firefox下就可以用SVG来处理图片的灰度。代码如下:
那我要返回彩色如何做呢?

值得一提的是,这里有个问题,就是Firefox下,用SVG技术会导致网页变得没有那么流畅了。
通过SVG的绘图原理可知,是根据点来绘制的,灰度也是改变每个点的色值。渲染的自然也就慢了。
如何取舍,根据自己手中的项目来决定。

PS: 初学难免有误,如有错误,请大家及时指正,谢谢!