Mélanges de texte sur la couleur d'arrière-plan

Vous visez à styliser une barre de progrès avec des couleurs de main gauche variables, et la couleur du texte devrait ajuster dynamiquement en fonction de l'arrière-plan sous-jacent. Contexte, mais cela s'est avéré infructueux. Vous avez également envisagé d'utiliser Filter: GraysCale (1) Contrast (9);, mais cela n'a pas non plus produit l'effet souhaité. En utilisant cette méthode, vous éliminez le besoin de mode mélange. Largeur: 200px; hauteur: 20px; Contexte: Linear-Gradient (à droite, # 43A047 50%, #eee 0); Texte-aligne: Centre; } .texte { CONTEXTE: GRADIEUR LINÉAIRE (à droite, blanc 50%, noir 0); -Webkit-Background-Clip: Texte; Clip d'arrière-plan: texte; Couleur: transparent; -Webkit-Text-Fill-Color: transparent; Police-poids: Bold; }

Cette approche garantit que la couleur du texte transite entre noir (dans des sections de main gauche plus sombres) et blanche (en sections plus légères de gauche).