今日全网都变灰了️，原因大家都知道。

正午吃饭老板问，你们是有啥开关吗，一会儿能把app、网页啥的都变成灰色。

我笑了笑说：对啊，有开关，duang的一下就都变灰色了。

饭后赶忙看看是怎样duang的，给咱们项目也都加上

先看看别人是怎样做的。

：

老板问我怎样让网站变灰！

某乎：

老板问我怎样让网站变灰！

小破站：

老板问我怎样让网站变灰！

看来就是你了：filter

赶忙去MDN瞅瞅是啥，

CSS属性 filter 将模糊或色彩偏移等图形作用使用于元素。滤镜通常用于调整图画、布景和边框的渲染。

CSS 标准里包含了一些已实现预定义作用的函数。你也能够参考一个 SVG 滤镜，通过一个 URL 链接到 SVG 滤镜元素（SVG filter element）。

下图中的blur()相信许多小伙伴都用过，将高斯模糊使用于输入图画，数值越大，越模糊。

老板问我怎样让网站变灰！

而grayscale()的作用是将图画转为灰度图，对图片进行灰度转换，是filter-function 的子属性。

老板问我怎样让网站变灰！

参数是转化值的大小，能够是数字或许百分号，当值为 100% 时，灰度最大。0% 时与原图没有差异。0% 到 100% 之间的值会使灰度线性改变。参数为空时使用值为1。

大都平台参数都是0.95，跟别人设置相同准没错。

再看看filter还有哪些其他用法，注释我都加上了。

/* 获取指向 SVG 滤镜的 URI，该SVG filter能够嵌入到外部 XML 文件中。 */
filter: url("filters.svg#filter-id");
/* blur() 函数将高斯模糊使用于输入图画。 */
filter: blur(5px);
/* brightness() 函数将线性乘法器使用于输入图画，使其看起来或多或少地变得亮堂。 */
filter: brightness(0.4);
/* contrast() 函数可调整输入图画的对比度。值是 0% 的话，图画会全黑。值是 100%，图画不变。 */
filter: contrast(200%);
/* drop-shadow() 函数对输入图画使用暗影作用。暗影能够设置模糊度的，以特定色彩画出的遮罩图的偏移版别，最终合成在图画下面。 */
filter: drop-shadow(16px 16px 20px blue);
/* grayscale() 函数将改变输入图画灰度。 */
filter: grayscale(50%);
/* hue-rotate() 函数在输入图画上使用色相旋转。 */
filter: hue-rotate(90deg);
/* invert() 函数反转输入图画。 */
filter: invert(75%);
/* 透明度 */
filter: opacity(25%);
/* saturate() 函数转换图画饱和度。 */
filter: saturate(30%);
/* sepia() 函数将图画转换为深褐色。 */
filter: sepia(60%);

就到这了，快给你的项目也加上吧️️️