How can I invert color using CSS

Question

HTML   lt div gt       lt p gt inverted color lt  p gt   lt  div gt    CSS  div       background-color   f00    p        color     how to use inverted color here in relation with div background          Is there any way to invert the p color with CSS   There is color  transparent  why not color  invert  even in CSS3

User · Answer

I think the only way to handle this is to use JavaScript Try this Invert text color of a specific element If you do this with css3 it s only compatible with the newest browser versions

User · Answer

Add the same color of the background to the paragraph and then invert with CSS     x000D   x000D  div   x000D      background-color   f00  x000D    x000D   x000D  p    x000D      color   f00  x000D      -webkit-filter  invert 100    x000D      filter  invert 100    x000D    x000D   lt div gt  x000D       lt p gt inverted color lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here is a different approach using mix-blend-mode  difference  that will actually invert whatever the background is  not just a single colour    x000D   x000D  div   x000D    background-image  linear-gradient to right  red  yellow  green  cyan  blue  violet   x000D    x000D  p   x000D    color  white  x000D    mix-blend-mode  difference  x000D    x000D   lt div gt  x000D     lt p gt Lorem ipsum dolor sit amet  consectetur adipiscit elit  sed do lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

[css] How can I invert color using CSS?

Examples related to css

Examples related to colors