为何一夜之间很多网站和APP都变成了灰色？
今天是2020年清明节，特殊的节日我们回顾过去中华民族经历的磨难，心情沉重的缅怀先祖。再加上抗击新冠病毒牺牲的医务工作者和四川火灾牺牲的消防人员让我们举国悲痛。我们用降半旗，默哀这样的形式来致敬我们的英雄，同时停止一切娱乐活动，并且今天几乎所有的主流媒体以及网站都变成了下面的样子。
灰色的度娘
灰色的CSDN
灰色的爱奇艺
灰色的B站
灰色的简书
那么这些网站如何一夜之间做到全部变色的呢？
仔细研究其实不难发现一些东西，比如百度的
这里的qm不难猜测就是清明的意思，activity就是清明节要去启用的意思。但是我并没有在css检查页面元素的css中看到这个类具体的样式，那么初步猜测应该是在某个JS里面去判断节日，然后换上对应的类。这里由于百度的首页JS比较多我没有再去翻阅JS文件，具体如何实现还有待确认。
B站的首页
我们再来看一下B站。也是在HTML中有个gray的类，通过单词本意感觉就是这个类的作用结果。而且在样式中我找到了如下CSS样式。
看到filter我们心里大概就已经知道是怎么回事了，也就是给我们的页面添加了一个滤镜效果。
我们之前知道filter是设置透明度的，并且具有兼容问题，在IE中使用opacity实现兼容。那么什么又是滤镜呢？
具体的我们去查看一下filter属性。
filter 语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
哇哦：什么东西，这么一大堆，好吓人。
咳咳咳，不要怕啊，学什么东西不要想着一下子就能学会，我们只要知道用什么学什么就行，这已经很难了，不要总想着一口气吃撑。比如我们今天就是要研究页面怎么能变成灰色。而且B站已经告诉我们使用的是什么。也就是grayscale，那就简单多了。
也就是说我们可以通过filter:grayscale(百分比)实现灰度图像。数值越大，灰度越大。
最后找一个图片去做试验。原图如下：
上页面：
设置滤镜：
OK，完全没的问题，那么如果是具体的颜色会怎样呢？
事实证明即使是普通的颜色设置也会被滤镜修改为对应的灰度。
好的，那么到现在为止我们已经学会了如何实现简单几行代码实现整个页面的灰度变化，那么你是否觉得自己没有吃饱呢，如果有请查看上面那一堆。看看自己能啃下多少。
网友评论