各大网站、APP都变灰了，怎么办？

有读者问，这是怎么做到的？

本来想写一篇文章来谈谈，没想到之前已经有大佬写过了，而且写得还不错，就不浪费时间和大家分享了（还有对原文章进行了一些删除）。

网站变成灰色

今天你可以看到很多网站，包括主页和内容都变成了灰色，比如百度、哔哩哔哩、爱奇艺、CSDN等。

CSDN

百度

可以看到网站上的所有内容都变成了灰色，包括按钮、图片等，这时候我们可能会想这是怎么做到的呢？

有人会认为所有内容都统一改成了CSS样式，所有图片都改成了灰色，按钮等样式也都改成了灰色。 但仔细想想，成本太高了，如果某个控件忘记加灰色样式，那就太唐突了。

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

完成

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

检查网页源代码，我们可以发现html中有一个可疑的类，叫做gray，中文意思是灰色。

灰化效果

其CSS内容为：

html.gray {    -webkit-filter: grayscale(.95);}

当我们取消之后，我们可以发现网站的颜色又可以恢复了。

恢复效果

果然，这个样式起作用了，而且是全局效果，因为它作用在html节点上。

另外看看CSDN，它也使用了这种CSS样式，它的内容是：

html {    -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);}

这个实现似乎更兼容。

因此，我们可以确认，通过全局的CSS样式，可以将整个网站变成灰色效果。

分析

那么这里我们就来详细了解一下这到底是一种什么样的CSS样式。

这种风格的调用，搜索MDN官方介绍，链接为：

官方介绍如下：

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

CSS 标准包括实现预定义效果的函数。 您还可以通过 URL 链接到 SVG 过滤器元素 (SVG [1]) 来引用 SVG 过滤器。

其实就是过滤器的意思。

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

演示

例如，图像、颜色、模糊、对比度等信息在这里通过样式进行改变。

全部使用示例如下：

/* URL to SVG filter */filter: url("filters.svg#filter-id");
/*  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;

各个使用介绍可以参考官方文档：

比如我们这里可以使用blur来设置高斯模糊，用法如下：

filter: blur(radius)

为图像设置高斯模糊。 一个值设置高斯函数的标准差，或者说屏幕上有多少像素混合在一起，所以值越大，越模糊； 如果没有设置值，则默认为0； 该参数可以设置绝对像素值，但不接受百分比值。

可以达到这样的效果：

影响

让我们回到刚才的灰色图像。 其实就是这样的设定。 其用法如下：

filter: grayscale(percent)

将图像转换为灰度。 该值定义了转换的范围。 值为 100% 会将图像完全转换为灰度，值为 0% 则不会对图像进行任何更改。 0% 到 100% 之间的值是效果的线性乘数。 如果不设置，则该值默认为0。除了传递百分比之外，还可以传递浮点数，效果是一样的。

喜欢：

filter: grayscale(1)filter: grayscale(100%)

可以将节点转换为100%灰度模式。

所以这里一切都清楚了。 如果我们要将整个站点变成灰色，并考虑兼容各个浏览器的写法，可以参考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);}

这样，想要变灰的节点只需要添加灰色类即可。 例如，如果添加到html节点中，则可以使整个站点变灰。

最后我们看一下浏览器对这种风格的兼容性，如图：

兼容性

这里我们看到除了IE之外，其他PC和手机浏览器都支持。 PC和浏览器也分别支持SVG图像，您可以放心使用。

技术交流群

扫描二维码进群并获取相关资源。 记得备注：城市+昵称+技术方向