Wie invertiere ich die CSS-Schriftfarbe basierend auf der Hintergrundfarbe?

CSS-Schriftfarbe basierend auf der Hintergrundfarbe umkehren

Die Umkehrung der Schriftfarbe basierend auf der Hintergrundfarbe ist eine häufige Designanforderung. In dieser Frage wird untersucht, wie dies mithilfe von CSS erreicht werden kann.

Lösung: Mix-Blend-Mode (eingeschränkte Unterstützung)

Die CSS-Eigenschaft mix-blend-mode ermöglicht das Mischen von Farben basierend auf der zugrunde liegenden Hintergrundfarbe. Diese Eigenschaft wird jedoch im Internet Explorer nicht unterstützt.

Lösung: Pseudoelemente (empfohlen)

Der empfohlene Ansatz für die browserübergreifende Kompatibilität ist die Verwendung von Pseudoelementen ( :vorher und :nachher). Indem Sie ein farbiges Pseudoelement über dem Text platzieren und dessen Textfarbe auf den gewünschten inversen Wert einstellen, können Sie den gewünschten Effekt erzielen.

.inverted-bar {
  position: relative;
}

.inverted-bar:before,
.inverted-bar:after {
  padding: 10px 0;
  text-indent: 10px;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  content: attr(data-content);
}

.inverted-bar:before {
  background-color: aqua;
  color: red;
  width: 100%;
}

.inverted-bar:after {
  background-color: red;
  color: aqua;
  width: 20%;
}

Lösung: Zwei DIVs (IE6- und IE7-Unterstützung)

Für zusätzliche browserübergreifende Unterstützung, insbesondere für IE6 und IE7, können Sie zwei DIV-Elemente anstelle von Pseudoelementen verwenden. Dazu gehört die absolute Positionierung des zweiten DIV über dem ersten und das Festlegen seines Z-Index, seiner Deckkraft und seiner Hintergrundfarbe, um den gewünschten Effekt zu erzielen.

Das obige ist der detaillierte Inhalt vonWie invertiere ich die CSS-Schriftfarbe basierend auf der Hintergrundfarbe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!