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