如下：当某些情况发生时一些娱乐网站统一变成灰色系，全站的内容都变成灰色了，包括按钮、图片等等。

怎么实现的？

最简单的是考虑所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的，按钮等样式也统一换成灰色样式。

但这个成本太高了，而且万一某个控件忘记加灰色样式了就会出现问题。

1、滤镜filter

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

filter: filter函数 | url(带滤镜的svg)

具体查看：css filter_CamilleZJ的博客-CSDN博客

//多个空格分隔
filter:  []* | none  //​给 SVG 元素  引用滤镜，如下：
​
filter: url(file.svg#filter-element-id)

/* URL to SVG filter */
filter: url("filters.svg#filter-id");/*  values */
filter: blur(5px);   //模糊
filter: brightness(0.4);  //使图片更亮0%-全黑图像。100%（1）-保持不变。大于 100%-更明亮
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);  //改变输入图像灰度，0% 到 100%，0%不变，大于会变灰色
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);  //透明度
filter: saturate(30%);  //转换图像饱和度
filter: sepia(60%);/* Multiple filters */
filter: contrast(175%) brightness(3%);/* Use no filter */
filter: none;/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: unset;

 实现灰色系：在根元素或root元素上添加class为gray：

html.gray {filter: grayscale(85%) saturate(80%);-webkit-filter: grayscale(85%) saturate(80%);-moz-filter: grayscale(85%) saturate(80%);-ms-filter: grayscale(85%) saturate(80%);-o-filter: grayscale(85%) saturate(80%);filter: url(data:image/svg+xml;utf8,#grayscale);filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=.85);-webkit-filter: grayscale(.85) saturate(.8);
}.gray, html {-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

如下：b站和爱奇艺