开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

前言

页面整体变灰效果，一般碰到一些悼念大事件，各个平台们都会纷纷作出产品首页灰色效果，表示悼念。第一次碰到的时候我也是很好奇，这个效果怎么实现，总不会每个样式去做替换吧，这个工作量也太大了，因此特意查了一些资料查看解决办法。

效果展示

以掘金首页为例子，最近打开我们都可以看到页面整体变灰色，了解网页的开发应该都知道这肯定是设置了对应的css来达到这个效果。

正常效果

灰色效果

作为一个开发，我们这时候就很熟练的打开F12进行样式查看，如下选中 html根标签，查看样式，然后取消选中，可以看到页面会变回正常颜色，再次选中就会变灰，因此可以判断，就是这个样式来决定现在这个灰色效果的。

这里先看filter属性是用来做什么？ filter属性可以为元素指定各种滤镜效果，比如模糊、灰度、明暗度、颜色偏移等。

它可以设置的值有很多，如下，

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

我们常用变灰的效果就是用grayscale这个值实现， grayscale(.95)表示将图像转换为灰度图像，参数值定义转换的比例。，我们可以按百分比的形式写，也可以按小数值来写。

顺便查看了其他函数效果，如下

各个函数效果

有反应说使用filter: grayscale(100%);滤镜方法会导致页面中固定定位（fixed）失效，如果出现的话建议分开加这个属性，不要在html根元素上加，分别在固定元素和其他元素上加这个属性。

这个filter属性常用的函数一般有grayscale和blur调整模糊、drop-shadow调整阴影、opacity调整透明度。这些常用效果值多熟悉熟悉，我开发常用到的也就是这几个，又掌握一个css技巧！