示例六：假装水墨屏

代码看这里吧： https://greasyfork.org/zh-CN/scripts/407641/code

原理很简单，为页面插入一段 CSS，其中有四段内容：

• 页面滤镜，让网页变成黑白色调，在各种纪念日，网站变黑白用的就是这个方法。我这里增加了一层亮度调节，这样可以降低深色元素的浓度，毕竟水墨屏的纯黑也不是特别黑，而手机屏现在可以显示纯黑的，这差别很大。
• 定义一个类，具有浅灰色背景，来模拟水墨屏本身的灰色（随着发展，现在的水墨屏越来越白了，但依旧不算纯白，加上手机电脑的屏幕本身比较亮，要灰一点才像
• 定义一个类，具有深灰色文字，页面中深灰色的文字，全都换成这个值，让显示效果更好控制。
• 让所有元素的文字具有阴影，借此模拟水墨屏文字发虚（现在高 PPI 设备基本不虚了），和屏幕残影造成的效果。

然后做了两个判断：

• 每一个背景色为浅色的元素，设置为上面的浅灰色背景
• 每一个文字颜色为深色的元素，调整我设定的那个颜色

其实直接把前面样式全局应用就可以兼容大多数小说站了，加入判断是为了更加严谨。

高级技法：

瀑布流和延迟加载的页面效果会很差。因为我们上面讲的这些，只是在页面载入后执行一次，后面新增加的元素并不会受到影响，背景和文字的颜色就不会被优化到。

所以加入和页面变化监控，当有元素变化时，对元素进行上述两个判断，按需要修改。这就解决问题了。

但是下一个问题又来了：当新元素需要修改时，我们修改了。这个元素不也发生变化了么，那监控元素变化的部分就会再通知我们这个元素变化了……然后陷入死循环（可能）。所以，当我们对元素进行修改时，要先停止对元素变化的监控，修改后再重新开启监控。

这部分比较比较复杂，不推荐新手现在啃。就是先了解些思路。这里算是展示一个看起来很简单，但其实挺复杂的脚本。