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

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

2

Myślę, że jedynym sposobem na rozwiązanie tego problemu jest użycie JavaScript

Spróbuj tego Odwróć kolor tekstu określonego elementu

Jeśli zrobisz to z css3, będzie to kompatybilne tylko z najnowszymi wersjami przeglądarek.

— Jan Peter
źródło