如何让网站变灰

如何让网站变灰

  今天给大家分享一个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	<<>scriptsrc="http://james.padolsey.com/demos/grayscale/grayscale.js"><script>

   使用：

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 ;

 

优点：兼容所有浏览器

       缺点：修改很麻烦。 

 

转载于:https://www.cnblogs.com/wwlww/p/8413518.html