Wie kann ich die Textfarbe basierend auf einem Hintergrund mit Farbverlauf in CSS dynamisch anpassen?

Textüberblendung mit Hintergrundfarbe

Sie möchten einen Fortschrittsbalken mit unterschiedlichen Farben auf der linken Seite gestalten, und die Farbe des Texts sollte sich dynamisch an den darunter liegenden Hintergrund anpassen.

Mix-Blend-Mode-Versuch

Sie haben zunächst mit Mix-Blend-Mode: Difference experimentiert, um die Textfarbe zu mischen mit dem Hintergrund, aber es erwies sich als erfolglos. Sie haben auch darüber nachgedacht, Filter: Graustufen(1) Kontrast(9); zu verwenden, aber auch das hat nicht den gewünschten Effekt gebracht.

Verlaufslösung

Eine effektive Lösung liegt in der Erstellung eines zusätzlichen Verlaufs um den Text einzufärben. Durch die Verwendung dieser Methode entfällt die Notwendigkeit des Mix-Blend-Modus.

Der benutzerdefinierte CSS-Code erreicht diese Farbverlaufsüberschreibung:

.container {
  width: 200px;
  height: 20px;
  background: linear-gradient(to right, #43a047 50%, #eee 0);
  text-align: center;
}

.text {
  background: linear-gradient(to right, white 50%, black 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

Dieser Ansatz stellt sicher, dass die Textfarbe zwischen Schwarz ( in den dunkleren linken Abschnitten) und weiß (in den helleren linken Abschnitten).

Das obige ist der detaillierte Inhalt vonWie kann ich die Textfarbe basierend auf einem Hintergrund mit Farbverlauf in CSS dynamisch anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!