CSS颜色反转技巧

我最近遇到了一些以前从未注意到的新CSS属性和属性值。在研究的过程中发现，有些非常的有用，有些似乎是多余，没有多大用处。CSS滤镜(Filters)就是属于非常有用的一类：grayscale, blur, sepia等等都是常见的滤镜。还有，你知道颜色反转吗？你知道如何让页面上的任何元素颜色反转(反相)吗？

CSS代码

在CSS里，invert的值是个百分数，100%就是完全反转颜色，0%就是正常显示:

.normal {
	filter: invert(0%);
}

.inverted {
	filter: invert(100%);
}

你可以反转单个元素的颜色，也可以反转——document.documentElement——整个页面内容的颜色。我们用window.getComputedStyle(el)获取到的值是CSS原始数值，我还不知道有什么方法获取反转后的元素的颜色值。

颜色反转(反相)能调节人眼的视觉感受，一般的电脑/电视的显示器上都有色彩调节功能，我能想出的invert的一个应用场景，就是夜里浏览网页时，将白色的网页颜色反转，眼睛看着会更舒服。你还能想出其它有用的地方吗？分享一下。