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
的一个应用场景,就是夜里浏览网页时,将白色的网页颜色反转,眼睛看着会更舒服。你还能想出其它有用的地方吗?分享一下。