text, das über Hintergrund farbs Color

Sie zielen, eine Fortschrittsbalken mit unterschiedlichen linken Farben zu stylen, und die Farbe des Textes sollte dynamisch basierend auf dem zugrunde liegenden Hintergrund anpassen. Hintergrund, aber es erwies sich als erfolglos. Sie haben auch überlegt, Filter zu verwenden: Graustufen (1) Kontrast (9);, aber das ergab auch nicht den gewünschten Effekt.

Gradientenlösung

Eine effektive Lösung liegt darin, einen zusätzlichen Gradienten zu erstellen, um den Text zu färben. Durch die Verwendung dieser Methode beseitigen Sie den Mix-Blend-Modus.

Der benutzerdefinierte CSS-Code erreicht diese Gradientin:

. Container { Breite: 200px; Höhe: 20px; Hintergrund: Linear-Gradient (nach rechts, #43a047 50%, #eee 0); Text-Align: Mitte; } .Text { Hintergrund: Linear-Gradient (nach rechts, weiß 50%, schwarz 0); -Webkit-Background-Clip: Text; Hintergrund-Clip: Text; Farbe: transparent; -Webkit-Text-Fill-Farben: transparent; Schriftgewicht: fett; }

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