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

<style type="text/css">
.gray {
-webkit-filter: grayscale(100%); /* CSS3 filter方式，webkit内核方式，firefox外的绝大部分的现代浏览器*/
-moz-filter: grayscale(100%); /* 目前没有实现 */
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); /* CSS3 filter方式，标准写法*/
/*filter: url(filters.svg#grayscale);*/ /* Firefox 4+ */
filter: gray; /* IE 6-9 */
}
.gray:hover{
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
filter: none; /* Firefox 4+, IE 6-9 */
}
</style>

<div>
<img src="http://egret2016-tcjujin.eventdove.com/img/refactor2/custom/webbg01.jpg" width="640" height="320" /> <br>
<img src="http://egret2016-tcjujin.eventdove.com/img/refactor2/custom/webbg01.jpg" width="640" height="320" class="gray" />
</div>

<!-- <svg version="1.1" 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> -->