跨浏览器图像灰度(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> -->

 

转载于:https://www.cnblogs.com/horanly/p/6101218.html