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 er een manier om de kleur p
om te keren met CSS?
Er is color: transparent;
waarom niet color: invert;
zelfs in CSS3?
Antwoord 1, autoriteit 100%
Voeg dezelfde kleur van de achtergrond toe aan de alinea en keer om met CSS:
div {
background-color: #f00;
}
p {
color: #f00;
-webkit-filter: invert(100%);
filter: invert(100%);
}
<div>
<p>inverted color</p>
</div>
Snippet uitvouwen
Antwoord 2, autoriteit 16%
Hier is een andere benadering met behulp van mix-blend-mode: difference
, die feitelijk de achtergrond omkeert, niet slechts een enkele kleur:
div {
background-image: linear-gradient(to right, red, yellow, green, cyan, blue, violet);
}
p {
color: white;
mix-blend-mode: difference;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscit elit, sed do</p>
</div>
Snippet uitvouwen
Antwoord 3
Ik denk dat de enige manier om dit aan te pakken is om JavaScript te gebruiken
Probeer deze Tekstkleur van een specifiek element omkeren
Als je dit met css3 doet, is het alleen compatibel met de nieuwste browserversies.