清明节网站都变灰了，你知道是怎么做的么？

一般遇到清明节这种，各种APP,网站，都会变灰。比如

可以看到，这些网站的全站内容都变成灰色的了，包括按钮、图片、文字等信息。

不知道大家有没有对他们是如何变灰的产生问号，反正我是产生了。

我第一个反应是重写了 css 样式，图片做了替换。

先不说我上面这个想法好不好使哈，我上面想到的这个方案，肯定替换成本是相当高的，万一哪里没写对，再搞点幺蛾子出来，这个事情就有点玩大了。

所以带着这个问题，我按下了键盘上神圣的 F12 去寻找答案。

果然，这个答案就简单的躺在浏览器的调试窗口中。

打开某东的首页，按下 F12 后，看到在 html 上面增加了一个样式：

手动把这里样式取消掉，看到网页恢复了正常的颜色，具体代码如下：

html.o2_gray {-webkit-filter: grayscale(100%);filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

再去我最常逛的 CSDN 看一圈：

具体代码如下：

html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

可以看到，这两个网站的这个这个 css 修饰的对象都是 html ，是作用全局的，而且在 CSDN 的代码要比某东的长很多，首先讲一下，长不一定是好的，但是这个代码一看就要兼容性好很多。

带有 webkit 前缀的意思是在 webkit 内核的浏览器中生效，比较常见的有 Chrome 、搜狗高速浏览器、 360极速版等等一大堆浏览器；而带有 moz 前缀的意思是在 firefox 中生效；带有 ms 前缀的含义是 IE （不得不说 CSDN 连 IE 都还在支持我也是惊了）；带有前缀 o 的是指 Opera （欧朋）浏览器（这个在国内是真的没什么用户，不过讲真的还可以，我用过一段时间，后面是投向了 Chrome 的怀抱）。

原理

这里其实就是直接在全部的 DOM 元素上增加了一个 filter ，

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜，通过一个URL链接到SVG滤镜元素(SVG filter element)。

大家可以看看官方文档哈 filter - CSS（层叠样式表） | MDN

清明节网站都变灰了，你知道是怎么做的么？相关推荐

很多网站、APP 前段时间一下都变灰了。先来感受一下变灰后的效果。
很多网站.APP 前段时间一下都变灰了. 先来感受一下变灰后的效果. 这种灰色的效果怎么实现的呢?如何做到图片.文字.按钮都变灰的效果呢? 方案 1,换一套灰色的 UI,那显然成本太大了,用脚指头想一 ...
全网页都变灰了，这是怎么实现的？
近期网页的灰色效果,仅仅只需几行代码即可实现,如下,需要自取: html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);- ...
清明节全国哀悼,那么网站全部变灰是怎么实现的?
作为一名后端java开发人员,初次看到这次2020年清明节网站全部变灰的第一印象是他们应该是改了贴图或者说改了一些配置,怎么思考都应该是在backgroud这些参数上做修改,但是当我今天打开百度地图的 ...
网站都变成灰色了，它是怎么实现的
估计大家发现了,今天,各大网站.APP都变灰了,原因想必大家都知道了. 粉丝群里有人在问,这是如何做到的? 我本来想写一篇文章来聊聊,没想到之前已经有一位大佬写过了,而且写的还不错,就不费工夫了,分享 ...
网站都变成灰色了，它是怎么实现的？
大家好,我是二哥呀. 想必大家都感受到了,很多网站.APP 在昨天都变灰了. 先来感受一下变灰后的效果. 这种灰色的效果怎么实现的呢?如何做到图片.文字.按钮都变灰的效果呢? 方案 1,换一套灰色的 ...
今天网站都变成灰色了，这其中是怎么实现的？
" 阅读本文大概需要 7 分钟. " 今天是 2020 年 4 月 4 日,星期六,清明节. 我们的国家经历了非常惨痛的时刻,很多英雄在救助他人的路上倒下,更有很多烈士英雄保卫人民 ...
网站都变成灰色了，这其中代码是怎么实现的？（发现文章，记录保存方便查看）
今天是 2020 年 4 月 4 日,星期六,清明节. 我们的国家经历了非常惨痛的时刻,很多英雄在救助他人的路上倒下,更有很多烈士英雄保卫人民的安危遇难,今天全国下降半旗,北京时间 10 点全国默哀三 ...
把网站服务器调黑白,网站快速变黑白灰色的4种方法
一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念.那么天下数据小编就说说,通过几行 ...
沉痛悼念！网站快速变黑白灰色的4种方法
一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念.那么今天小编就说说,通过几行简单 ...

清明节网站都变灰了，你知道是怎么做的么？

原理

清明节网站都变灰了，你知道是怎么做的么？相关推荐

最新文章

热门文章