网易云音乐

百度

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

网站变灰色html网站变灰色一步搞定 React

F12调试界面

filter（滤镜）

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