网易云音乐界面颜色变灰色（一步搞定）

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

网易云音乐

百度

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

F12调试界面

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

demo

语法如下：

/* 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