通过简单的几行代码使页面变成灰色，我们一起来了解一下互联网大咖企业的实现方式。

2020 年 4 月 4 日 星期六 清明节

我们的国家乃至世界经历了非常惨痛的时期，很多人民英雄在前线奋战救助他人的路上倒下，更有很多烈士英雄保卫人民的安危遇难，今天全国降半旗默哀，北京时间 10 点全国默哀三分钟，来致敬英雄们。同时今天一切公共娱乐活动也都会停止，包括直播、综艺、影视、游戏等等。

在这里我也代表程序员也向全国抗击新冠肺炎疫情斗争牺牲的烈士和逝世的同胞表达深切的哀悼，向所有在抗战在疫情前线的工作和医护人员致敬。

今天大家如果上网会发现很多业界大佬互联网网站包括主页和内容也都已经变成了灰色，比如百度、今日头条、阿里淘宝、京东、优酷、B 站、爱奇艺、CSDN 等等。

今日头条

百度

爱奇艺

大家可以看到全站的内容都变成灰色了，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是太突兀了。其实实现逻辑并没有想象的这么复杂，今天我们就一起聊聊如何使用几行行代码使页面变灰。

我们以CSDN为测试分析案例。

• 首先进入CSDN官网，我们会发现页面效果，如下图，页面都是灰色显示。

 

• 点击F12使用程序员的调试利器，我们会找到下面的css样式。

 

• 此时我们把html标签中的-webkit-filter和filter注释掉就会发现，页面恢复了原来的色彩。

 

其实，就是这么简单，你是不是也明白了。

下面我们就一起了解一下filter这个样式，到底有啥神奇的地方。

首先了解一下官方的解释：

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

其实就是一个滤镜，可以改变图片、颜色、模糊、对比度等，我们看一下官网的demo。

 

看到这里我想你应该了解的差不多了，希望可以帮到爱学习的你。