Wie kann ich die Textfarbe basierend auf der Hintergrundfarbe in einer Fortschrittsleiste dynamisch ändern?

Text über Hintergrundfarbe gemischt

Beim Versuch, einen benutzerdefinierten Fortschrittsbalken zu gestalten, steht ein Entwickler vor der Herausforderung, die Textfarbe dynamisch zu ändern basierend auf der Hintergrundfarbe darunter. Der gewünschte Effekt ist ein dunkler Text auf einem hellen Hintergrund und umgekehrt.

Verschiedene Mix-Blend-Modi und Farbkombinationen wurden erfolglos ausprobiert. Eine alternative Lösung besteht darin, einen separaten Farbverlauf zum Färben des Texts zu erstellen:

.container {
  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;
}

Durch die Verwendung eines linearen Farbverlaufs für das Textelement kann die Farbe basierend auf dem Hintergrundfarbverlauf reibungslos von Weiß nach Schwarz übergehen. Der Text wird transparent und mit dem gewünschten Farbverlauf gefüllt, wodurch der gewünschte Mischeffekt entsteht.

Das obige ist der detaillierte Inhalt vonWie kann ich die Textfarbe basierend auf der Hintergrundfarbe in einer Fortschrittsleiste dynamisch ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!