網站變灰是如何實現的

以bilibili為例，調出開發者工具，選中html標籤，可以看到右邊的樣式為：

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

grayscale() : 對圖片進行灰度轉換，它是的子屬性。

語法

grayscale(amount)

Copy to Clipboard

引數

• amount

  轉換值的大小，可以是number或percentage。當值為 100% 時，灰度最大。0% 時與原圖沒有區別。0% 到 100% 之間的值會使灰度線性變化。amount 為空時使用值為1.

例子

grayscale(0)     /* 無效果 */
grayscale(.7)    /* 70% 灰度 */
grayscale(100%)  /* 灰度最大 */

如何取消變灰

新增tampermonkey指令碼：

1. 選擇讓灰度無效果

GM_addStyle ( `
    * {
        filter:grayscale(0) !important;
        -webkit-filter:grayscale(0) !important;
    }
` );
 

2. 或者直接剔除掉

GM_addStyld('
  * {
	filter:none !important;
	-webkit-filter:none !important;
  }
')

以上都可以實現讓網頁恢復色彩。

PS：!important的意思是覆蓋任何其他的宣告。