4月4号，清明节期间，很多网站和APP的页面颜色都变成了灰色，如网易云音乐、百度、爱奇艺等。是怎么做到的呢？其实很简单，只需要几行代码就能搞定。

以网易云音乐网站为例，用浏览器打开网易云音乐网站，按F12进入浏览器调试界面，选中html标签可以看到html样式上多了filter属性，取消属性前面的选中后，网站恢复到正常有颜色状态。

filter（滤镜）

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

语法如下：

/* URL to SVG filter */
filter: url("filters.svg#filter-id");

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Global values */
filter: inherit;
filter: initial;
filter: unset;

兼容性

总结：

以上就是网站变灰的实现方法，主要是掌握fliter滤镜的用法，喜欢的话可以尝试一下，欢迎大家评论和留言哦，谢谢！

demo的链接地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter