网站变灰设计到脚本知识

网站变灰是如何实现的

以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的意思是覆盖任何其他的声明。