Wie kann ich Farbe mit CSS invertieren?

83

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

Gibt es eine Möglichkeit, die pFarbe mit CSS zu invertieren ?

Es ist , color: transparent;warum nicht color: invert;auch in CSS3?

css colors

— Bhojendra Rauniyar
quelle

1

-webkit-filter: invertieren (100%);

— Daniel__

1

Dies könnte für Sie sehr hilfreich sein: net.tutsplus.com/tutorials/html-css-techniques/…

— Ron van der Heijden

3

In dieser Geige habe ich versucht, drei Ansätze zu kombinieren: CSS-Filter für WebKit, SVG-Filter für Firefox und den brillanten Trick, outline-color: invert den Lea Verou für IE erfunden hat . Leider hat Opera (Presto) den mit Umrissen gefüllten Bereich nicht abgeschnitten overflow, sodass es dort nicht funktioniert. Ich hoffe, dass diese Demo für die weiteren Experimente noch nützlich sein kann.

— Ilya Streltsyn

124

Fügen Sie dem Absatz dieselbe Hintergrundfarbe hinzu und invertieren Sie ihn dann mit CSS:

div {
    background-color: #f00;
}

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

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

Erweitern Sie das Snippet

— Bruno Lemos
quelle

Dies kehrt das um color, aber nicht das background. Es passiert einfach so, dass colores auf das gleiche eingestellt ist wie background-color. Siehe unten für eine Lösung, die den Hintergrund invertiert.

— 20 ᆺ ᆼ

8

Hier ist ein anderer Ansatz mix-blend-mode: difference, der tatsächlich den Hintergrund invertiert, nicht nur eine einzelne Farbe:

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>

Erweitern Sie das Snippet

— ᆼ ᆺ ᆼ
quelle

1

+1 mix-blend-mode: differencefunktioniert filter: invert(100%), wenn bei Verwendung mit position: fixed(z. B. Modal-) stackoverflow.com/a/37953806/366332

— Vanni Totaro

2

Ich denke, die einzige Möglichkeit, damit umzugehen, ist die Verwendung von JavaScript

Versuchen Sie, die Textfarbe eines bestimmten Elements umzukehren

Wenn Sie dies mit CSS3 tun, ist es nur mit den neuesten Browserversionen kompatibel.

— Jan Peter
quelle