Comment puis-je ajuster dynamiquement la couleur du texte en fonction d'un arrière-plan dégradé en CSS ?

Fusion du texte sur la couleur d'arrière-plan

Vous souhaitez styliser une barre de progression avec différentes couleurs de gauche, et la couleur du texte doit s'ajuster dynamiquement en fonction de l'arrière-plan sous-jacent.

Tentative de mode Mix-Blend

Vous avez initialement expérimenté le mode mix-blend : différence de mélange la couleur du texte avec l'arrière-plan, 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 donné l'effet souhaité.

Solution de dégradé

Une solution efficace consiste à créer un dégradé supplémentaire pour colorer le texte. En employant cette méthode, vous éliminez le besoin d'un mode mix-blend.

Le code CSS personnalisé permet d'obtenir ce remplacement de dégradé :

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

Cette approche garantit que la couleur du texte passe du noir ( dans les sections de gauche plus sombres) et blanc (dans les sections de gauche plus claires).

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!