如何让网站变灰
今天给大家分享一个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
|
<script type="text/javascript">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; |
优点：兼容所有浏览器
缺点：修改很麻烦。