跨浏览器图像灰度(grayscale)解决方案
生活随笔
收集整理的這篇文章主要介紹了
跨浏览器图像灰度(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
總結
以上是生活随笔為你收集整理的跨浏览器图像灰度(grayscale)解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vagrant安装及使用方法
- 下一篇： HTML5 Canvas、内联 SVG、