我最近遇到了一些以前从未注意到的新 CSS 属性和属性值.在研究的过程中发现,有些非常的有用,有些似乎是多余,没有多大用处.就是属于非常有用的一类:
grayscale
,
blur
,
sepia
等等都是常见的滤镜.还有,你知道颜色反转吗?你知道如何让页面上的任何元素颜色反转 (反相) 吗?
CSS 代码
在 CSS 里,
invert
的值是个百分数,
100%
就是完全反转颜色,
0%
就是正常显示:
.normal {
filter: invert(0 % );
}.inverted {
filter: invert(100 % );
}
你可以反转单个元素的颜色,也可以反转--
document.documentElement
--整个页面内容的颜色.我们用
window.getComputedStyle(el)
获取到的值是 CSS 原始数值,我还不知道有什么方法获取反转后的元素的颜色值.
颜色反转 (反相) 能调节人眼的视觉感受,一般的电脑 / 电视的显示器上都有色彩调节功能,我能想出的
invert
的一个应用场景,就是夜里浏览网页时,将白色的网页颜色反转,眼睛看着会更舒服.你还能想出其它有用的地方吗?分享一下.
来源: http://www.webhek.com/invert-colors-using-css