跨浏览器图像灰度(grayscale)解决方案
生活随笔
收集整理的這篇文章主要介紹了
跨浏览器图像灰度(grayscale)解决方案
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<style type="text/css">
.gray {
-webkit-filter: grayscale(100%); /* CSS3 filter方式，webkit內(nèi)核方式，firefox外的絕大部分的現(xiàn)代瀏覽器*/
-moz-filter: grayscale(100%); /* 目前沒(méi)有實(shí)現(xiàn) */
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); /* CSS3 filter方式，標(biāo)準(zhǔn)寫(xiě)法*/
/*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> -->
?
轉(zhuǎn)載于:https://www.cnblogs.com/horanly/p/6101218.html
總結(jié)
以上是生活随笔為你收集整理的跨浏览器图像灰度(grayscale)解决方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： vagrant安装及使用方法
- 下一篇： PHP unset()函数销毁变量 但没