想必大家已经发现了，很多时候，因为一些特殊的节日，我们很多网站都会置灰的。原因大家都很清楚，但是作为前端，我们站在技术的角度来分析下怎么实现这个变灰效果呢。
我就想了解一下，这种页面的图片、按钮、文字都变灰的效果是怎么实现的，而且只支持当前页面？
想法一：前端开发人员紧急加班，把所有的组件颜色都置灰，感觉成本太高，不可能实现
想法二：有一个统一设置，控制页面所有组件置灰
以b站作为例子，我们来分析一下
打开F12开发者模式，用元素选择器定位到页面灰色的图片或标签处，在右侧样式的面板中往下翻，可以看到所有的样式代码。
找到html样式定义上，可以发现它继承自html.grey，我们将其取消，就能发现网站的颜色就能重新还原回来了，其他网页基本也是用了这个css样式。点进去看看
grey：灰色的
会发现有这样一段代码，关键是中间的一句：
-webkit-filter：grayscale(.85) saturate(.8)
-webkit-filter官方的解释是：
filterCSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。CSS 标准里包含了一些已实现预定义效果的函数。你也可以参考一个 SVG 滤镜，通过一个 URL 链接到 SVG 滤镜元素 (SVG filter element[1])。
其实就是一个滤镜的作用
现在规范中支持的效果有：
grayscale 灰度 值为0-1之间的小数
sepia 褐色 值为0-1之间的小数
saturate 饱和度 值为num
hue-rotate 色相旋转 值为angle
invert 反色 值为0-1之间的小数
opacity 透明度 值为0-1之间的小数
brightness 亮度 值为0-1之间的小数
contrast 对比度 值为num
blur 模糊 值为length
drop-shadow 阴影
如果我们想要把全站变成灰色，再考虑到各浏览器兼容写法，可以参考下 CSDN 的写法：
.gray {-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);}
这样想要变灰的节点只需要加上 gray 这个 class 就好了，比如加到 html 节点上就可以全站变灰了。
最后再来看下兼容性
这里我们看到，这里除了 IE，其他的 PC、手机端的浏览器都支持了，Firefox 的 PC、安卓端还单独对 SVG 图像加了支持，可以放心使用。
