How can I invert color using CSS?

Question

HTML

<div>     <p>inverted color</p> </div> 

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?

Answer 1

Add the same color of the background to the paragraph and then invert with CSS:

div {      background-color: #f00;  }    p {       color: #f00;      -webkit-filter: invert(100%);      filter: invert(100%);  }

<div>      <p>inverted color</p>  </div>