Comment puis-je modifier dynamiquement la couleur du texte en fonction de la couleur d'arrière-plan dans une barre de progression ?

Texte mélangé à la couleur d'arrière-plan

Dans une tentative de style d'une barre de progression personnalisée, un développeur est confronté au défi de changer la couleur du texte de manière dynamique en fonction de la couleur d’arrière-plan en dessous. L'effet recherché est un texte sombre sur un fond clair et vice versa.

Divers modes de mélange et combinaisons de couleurs ont été essayés sans succès. Une solution alternative implique de créer un dégradé séparé pour colorer le texte :

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

En utilisant un dégradé linéaire sur l'élément de texte, la couleur peut passer en douceur du blanc au noir en fonction du dégradé d'arrière-plan. Le texte devient transparent et est rempli du dégradé souhaité, ce qui donne l'effet mélangé souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!