文章目錄

• • • • • 一、主流網站主題分析
        • • 1. 騰訊課堂
          • 2. bilibili
          • 3. CSDN
        • 二、默認樣式
        • • 2.1. 騰訊課堂
          • 2.2. bilibili
          • 2.3. CSDN
        • 三、 案例demo

一、主流網站主題分析

實現原理：在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

總結

以上是生活随笔為你收集整理的网站都变成灰色，一行代码就搞定了！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。