程序员

爱奇艺

百度(全球最大的中文搜索引擎)

可以看到整个站的内容都变成了灰色，包括按钮，图片等等。此时，我们可能想知道这是如何做到的。

有人认为所有的内容都变成了一个CSS样式，图片都变成了灰色，按钮等样式也变成了灰色样式。但是你想想，成本太高了，一个控件忘了加灰风格岂不是太突兀？

其实解决方法很简单，只需要几行代码。

认识

我们选一个网站，比如b站，打开浏览器开发者工具。

检查网页的源代码，可以发现html的这个地方有一个疑似类，叫gray，中文意思是gray。

灰色效应

它的CSS内容是:

如果取消，我们会发现网站的颜色可以重新恢复。

恢复效果

果然，这种风格起作用了，而且是全局效果，因为它作用在html节点上。

此外，看看CSDN，它也使用这种CSS样式，其内容是:

这个实现好像更兼容。

所以我们可以肯定，一个全局的CSS样式，可以把整个网站变成一个灰色的效果。

分析

所以我们来详细了解一下这是一种什么样的CSS样式。

这种风格叫做滤镜。搜索MDN的官方介绍，其链接是:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter.

官方介绍如下:

滤镜CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

CSS标准包含一些已经达到预定义效果的函数。您也可以引用一个SVG过滤器，并通过URL链接到SVG过滤器元素(SVG过滤器元素[1])。

其实就是一个滤镜的意思。

官方有一个Demo，可以看到效果，如图。

程序员

爱奇艺

百度(全球最大的中文搜索引擎)

可以看到整个站的内容都变成了灰色，包括按钮，图片等等。此时，我们可能想知道这是如何做到的。

有人认为所有的内容都变成了一个CSS样式，图片都变成了灰色，按钮等样式也变成了灰色样式。但是你想想，成本太高了，一个控件忘了加灰风格岂不是太突兀？

其实解决方法很简单，只需要几行代码。

认识

我们选一个网站，比如b站，打开浏览器开发者工具。

检查网页的源代码，可以发现html的这个地方有一个疑似类，叫gray，中文意思是gray。

灰色效应

它的CSS内容是:

如果取消，我们会发现网站的颜色可以重新恢复。

恢复效果

果然，这种风格起作用了，而且是全局效果，因为它作用在html节点上。

此外，看看CSDN，它也使用这种CSS样式，其内容是:

这个实现好像更兼容。

所以我们可以肯定，一个全局的CSS样式，可以把整个网站变成一个灰色的效果。

分析

所以我们来详细了解一下这是一种什么样的CSS样式。

这种风格叫做滤镜。搜索MDN的官方介绍，其链接是:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter.

官方介绍如下:

滤镜CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

CSS标准包含一些已经达到预定义效果的函数。您也可以引用一个SVG过滤器，并通过URL链接到SVG过滤器元素(SVG过滤器元素[1])。

其实就是一个滤镜的意思。

官方有一个Demo，可以看到效果，如图。