css反转_使用CSS反转颜色

css反转

I've been obsessed lately with finding new or lesser known CSS properties and values and playing around when them.  Some of them are quite useful and others are seemingly only for a giggle.  CSS filters fall in the useful department:  grayscale, blur, sepia -- all common filters.  But how about invert?  And did you know you can invert the color of every element on a page?

最近，我一直迷恋于寻找新的或鲜为人知CSS属性和值，并在它们出现时进行操作。 其中一些功能非常有用，而另一些功能似乎只是在傻笑。 CSS过滤器属于有用的部门： grayscale ， blur ， sepia -所有常见的过滤器。 但是反转呢？ 而且您知道可以反转页面上每个元素的颜色吗？

View Demo 观看演示

CSS (The CSS)

The invert value is percentage-based; 100% fully inverts the colors and 0% displays all colors as normal:

invert值基于百分比； 100%完全反转颜色， 0%正常显示所有颜色：

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

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

You can invert individual elements or, if you invert the document.documentElement, the entire page contents get inverted.  The values reported back by window.getComputedStyle(el) will be the original CSS values, however, so there's no way of getting the true inverted values of given properties.

您可以反转单个元素，或者，如果反转document.documentElement ，则整个页面内容也会反转。 但是，由window.getComputedStyle(el)返回的值将是原始CSS值，因此无法获取给定属性的真实倒置值。

View Demo 观看演示

Color inversion is a useful accessibility tool, though it is oftentimes provided by the user's operating system or a separate tool.  I can see inversion being helpful at night, easing eye strain when looking at screens.  Can you think of a good use of color inversion?  Please share!

颜色反转是一种有用的辅助功能工具，尽管它通常由用户的操作系统或单独的工具提供。 我可以看到反转在晚上很有用，可以缓解看屏幕时的眼睛疲劳。 您能想到色彩反转的好用吗？ 请分享！

翻译自: https://davidwalsh.name/invert-colors-css

css反转