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?
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.
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With