Как я могу инвертировать цвет с помощью CSS?

87

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 colors Бходжендра Раунияр
источник
2
-webkit-filter: инвертировать (100%);
daniel__
1
Это может быть очень полезно для вас: net.tutsplus.com/tutorials/html-css-techniques/…
Рон ван дер Хейден,
3
В этой скрипке я попытался объединить 3 подхода: фильтр CSS для WebKit, фильтр SVG для Firefox и блестящий трюк, outline-color: invert изобретенный Леей Веру для IE. К сожалению, Opera (Presto) не обрезает область, заполненную контуром overflow, поэтому там работать не будет. Надеюсь, что эта демонстрация еще может быть полезна для дальнейших экспериментов.
Илья Стрельцын

Ответы:

130

Добавьте тот же цвет фона к абзацу, а затем инвертируйте с помощью CSS: 

div {
    background-color: #f00;
}

p { 
    color: #f00;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}
<div>
    <p>inverted color</p>
</div>
Развернуть фрагмент

Бруно Лемос
источник
Это инвертирует color, но не background. Так уж получилось, что colorустановлен такой же, как background-color. См. Ниже решение, которое переворачивает фон.
ᆼ ᆺ ᆼ
10

Вот другой подход 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>
Развернуть фрагмент

ᆼ ᆺ ᆼ
источник
1
+1 mix-blend-mode: differenceработает там, где filter: invert(100%)не работает при использовании position: fixed(скажем, модальных) stackoverflow.com/a/37953806/366332
Ванни Тотаро