Jak mogę odwrócić kolor za pomocą 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 ? */
}

Czy jest sposób na odwrócenie pkoloru za pomocą CSS?

Jest color: transparent;to dlaczego nie color: invert;nawet w CSS3?

css colors Bhojendra Rauniyar
źródło
2
-webkit-filter: odwróć (100%);
daniel__,
1
To może być bardzo pomocne dla Ciebie: net.tutsplus.com/tutorials/html-css-techniques/ ...
Ron van der Heijden
3
W tych skrzypcach próbowałem połączyć 3 podejścia: filtr CSS dla WebKit, filtr SVG dla Firefoksa oraz genialny trik z outline-color: invert wynalezioną przez Leę Verou dla IE. Niestety Opera (Presto) nie przycięła obszaru wypełnionego konturem przez overflow, więc tam nie będzie działać. Mam nadzieję, że to demo będzie nadal przydatne w dalszych eksperymentach.
Ilya Streltsyn

Odpowiedzi:

130

Dodaj ten sam kolor tła do akapitu, a następnie odwróć za pomocą CSS: 

div {
    background-color: #f00;
}

p { 
    color: #f00;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}
<div>
    <p>inverted color</p>
</div>
Rozwiń fragment

Bruno Lemos
źródło
To odwraca color, ale nie background. Tak się składa, że colorjest ustawione na to samo co background-color. Zobacz poniżej rozwiązanie, które odwraca tło.
ᆼ ᆺ ᆼ
10

Oto inne podejście mix-blend-mode: difference, które faktycznie odwróci niezależnie od tła, a nie tylko pojedynczy kolor:

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>
Rozwiń fragment

ᆼ ᆺ ᆼ
źródło
1
+1 mix-blend-mode: differencedziała tam, gdzie filter: invert(100%)zawodzi, gdy jest używany z position: fixed(powiedzmy modalami) stackoverflow.com/a/37953806/366332
Vanni Totaro