如何让网站变灰
今天给大家分享一个web前端的小技巧哦,就是如何在公共哀悼纪念日,让网站变为黑白颜色。其实很多方法有css实现,和js实现的。网上都有的,js有js的特点,css有css优点,当然缺点也是存在。
1.超兼容IE,火狐firefox,谷歌的css滤镜
1
2
3
4
5
6
7
8
9
|
html {
filter: grayscale( 100% );//IE浏览器
-webkit-filter: grayscale( 100% );//谷歌浏览器
-moz-filter: grayscale( 100% );//火狐
-ms-filter: grayscale( 100% );
-o-filter: grayscale( 100% );
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale= 1 );
-webkit-filter: grayscale( 1 );//谷歌浏览器 } |
优点:基本兼容所有浏览器。
缺点:就是ie6可能嗝屁了,ie页面电脑资源消耗肯能大一点。
2.js代码实现grayscale.js代码实现
引用文件,就不要讲了吧,好吧还是说一下:
1
|
<<> |
使用:
1
2
3
|
grayscale(document.getElementById( "thisImage" )); <script _ue_org_tagname="script"></script> |
优点:兼容所有浏览器,还能针对不同dom来实现
缺点:电脑资源消耗肯能大一点,尤其老ie,老电脑浏览器一度卡死。
3.SVG滤镜实现
新建一个空白文件,比如说:gray.svg
. 拷贝进去如下的XML代码:
1
2
3
4
5
|
<<>
<<>
<<>
< filter > < svg > |
CSS调用代码:
1
|
filter: url ( gray .svg#grayscale); |
对应ie还要多写一下:
1
|
filter: gray ; |
优点:兼容所有浏览器
缺点:修改很麻烦。