<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

總結

以上是生活随笔為你收集整理的跨浏览器图像灰度(grayscale)解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。