Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I invert color using CSS?

Tags:

css

colors

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?

like image 986
Bhojendra Rauniyar Avatar asked Jul 19 '13 08:07

Bhojendra Rauniyar


People also ask

Can you invert colors in CSS?

CSS allows you to invert the color of an HTML element by using the invert() CSS function that you can pass to the filter property. Because the default color of the text is black, the color is inverted into white with filter: invert(100%) syntax.

How do you invert black to white in CSS?

You can use filter: -webkit-filter: grayscale(1) invert(1); filter: grayscale(1) invert(1); Or just use invert(1) instead of grayscale(1) invert(1) if you have black and white image.

How do you invert a color?

Press the Windows key on your keyboard, or click the Windows icon at the bottom left of your screen, and type "Magnifier." Open the search result that comes up. 2. Scroll down through this menu until you find "Invert colors" select it.


1 Answers

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>
like image 108
Bruno Lemos Avatar answered Oct 18 '22 12:10

Bruno Lemos