如何让网站变灰

Posted wwlww

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何让网站变灰相关的知识,希望对你有一定的参考价值。

如何让网站变灰

  今天给大家分享一个web前端的小技巧哦,就是如何在公共哀悼纪念日,让网站变为黑白颜色。其实很多方法有css实现,和js实现的。网上都有的,js有js的特点,css有css优点,当然缺点也是存在。

 

 

1.超兼容IE,火狐firefox,谷歌的css滤镜

1
2
3
4
5
6
7
8
9
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;

 

优点:兼容所有浏览器

       缺点:修改很麻烦。 

 

以上是关于如何让网站变灰的主要内容,如果未能解决你的问题,请参考以下文章

CSS Demo网站页面变灰

在收到消息后秒级使网站变灰,不改代码不上线,如何实现?

如何让MFC对话框中的Menu菜单变灰或恢复

如何让 SwiftUI Picker 在子视图中工作? (变灰)

国家哀悼日 - 网站全局变灰

Wordpress网站变灰/黑白主题