filter 灰度处理：公祭日，一行代码让页面变成黑白色调

我们这里通过打开 Google 浏览器调试模式来实现快速预览。

首先在 Elements 里面点击 body 标签，在右侧出现的功能栏里找到 style 属性，具体点击位置如下图所示：

这里我们将通过修改全文 element 的 style 来实现快速实现页面色调修改 , 这里我们用到过滤器 filter，输入 filter，我们可以看到它有众多的属性，如下图所示：

用到的属性是灰度 grayscale()，括号里面跟的是元素灰度百分比。
当灰度百分比为 0 时，我们可以看到页面是正常状态的，所以正常页面默认 grayscale(0)，这时实现代码及页面状态如下图所示：

element.style {
    filter: grayscale(0);
}

当灰度百分比为 1（100%） 时，我们这时看到页面变成了全灰状态，即黑白页面，这时实现代码及页面状态如下图所示

element.style {
    filter: grayscale(1);
}

这时候就完成了 .