Use the CSS3 filter to invert the color of a picture

CSS provides filters is also a big highlight, I have been fascinated by the effects of some filters are useful, but some of the filter effect may be just for fun, CSS Common filters have these:,, grayscale blur sepia , all common filters. But how do you use and convert pictures? Today we are mainly talking about how to use the CSS3 filter to invert the color of a picture.

CSS Code

invertThe filter is to set the inverse color effect of the element, his value is set to: 0-100%,100% is full inverse color, 0 is to display the normal color.

. normal {Filter:invert (0%);}. Inverted {Filter:invert (100%);}

You can invert the color of a single element, or you can invert document.documentelement the entire page content to get a reversal effect. will be the original CSS value, so there is no way to get the real inverse value of the given property.

Color inversion is a useful auxiliary tool, but it is usually provided by the user's operating system or a separate tool. I can see the back of the night being helped to relieve eyestrain when looking at the screen. Can you think of a useful color reversal? Please share!

This article is to ask the author of the network to ask the network published, and asked the Web editor, reproduced please indicate the source and this article link. This site is reproduced in addition to the article, are the original site or translation, welcome any form of reprint, but please be sure to indicate the source, respect for the work of others.
Reprint Please specify: The article reprinted from: Ask the net» Use the CSS3 filter to invert the color of the picture.
This article title: Use the CSS3 filter to invert the color of a picture
This address: https://www.uedsc.com/invert-colors-css.html

Use the CSS3 filter to invert the color of a picture