码迷,mamicode.com
首页 > Web开发 > 详细

如何让网站变灰

时间:2018-02-04 17:59:58      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:filter   log   ie浏览器   cal   就是   调用   xmlns   padding   target   

如何让网站变灰

  今天给大家分享一个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
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
<<>svgversion="1.1"xmlns="http://www.w3.org/2000/svg">
<<>filterid="grayscale">
<<>feColorMatrixtype="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>

CSS调用代码:

1
filter: url(gray.svg#grayscale);

对应ie还要多写一下:

1
filter: gray;

 

优点:兼容所有浏览器

       缺点:修改很麻烦。 

 

如何让网站变灰

标签:filter   log   ie浏览器   cal   就是   调用   xmlns   padding   target   

原文地址:https://www.cnblogs.com/wwlww/p/8413518.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!