Як я можу інвертувати колір за допомогою CSS?

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 ? */
}

Чи є спосіб інвертувати pколір за допомогою CSS?

Є color: transparent;чому color: invert;навіть не в CSS3?

Додайте до абзацу той самий колір фону, а потім інвертуйте за допомогою CSS:

div {
    background-color: #f00;
}

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

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

Ось інший підхід із використанням mix-blend-mode: difference, який фактично інвертує будь-який фон, а не лише один колір:

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>

Я думаю, що єдиним способом впоратися з цим є використання JavaScript

Спробуйте цей інвертувати колір тексту певного елемента

Якщо ви робите це з css3, він сумісний лише з найновішими версіями браузера.