一、主流网站主题分析

实现原理：在html标签上的class添加一个全局过滤器样式即可

1. 腾讯课堂

在html标签添加一个class，给class一个全局样式

class="global-gray"

html.global-gray {-webkit-filter: grayscale(100%);filter: grayscale(100%);-webkit-filter: gray;filter: gray;
}

2. bilibili

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,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale);filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=.85);-webkit-filter: grayscale(.85) saturate(.8);
}

3. CSDN

给当前html标签添加全局过滤器

filter: grayscale(100%);

二、默认样式

2.1. 腾讯课堂

2.2. bilibili

2.3. CSDN

三、 案例demo

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter