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

以上是CSS颜色反转技巧的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>