Comment puis-je ajuster dynamiquement la couleur du texte à n'importe quelle couleur d'arrière-plan ?

Couleur d'arrière-plan superposée au texte

Dans la conception Web, il est souvent souhaitable d'obtenir une couleur de texte qui complète parfaitement l'arrière-plan. Ceci est particulièrement pertinent pour les barres de progression, où le texte peut devoir contraster avec différentes couleurs d'arrière-plan.

Limites du mode Mix-Blend

Au départ, vous avez tenté d'utiliser le mix -blend-mode : différence pour modifier la couleur du texte. Bien que cette technique puisse fournir des effets de mélange de couleurs, elle n'offre pas un contrôle complet sur l'ajustement des couleurs et peut ne pas toujours produire le résultat souhaité.

Approche du dégradé

Une approche plus fiable La solution consiste à créer un arrière-plan dégradé pour le texte. Ce dégradé intègre à la fois la couleur du texte souhaitée et la couleur d'arrière-plan.

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

Ce dégradé définit une transition du blanc au noir, garantissant que le texte se superpose bien sur les fonds clairs et sombres.

Résultat

Avec ce dégradé appliqué, le texte ajustera automatiquement sa couleur pour se fondre de manière transparente sur n'importe quelle gamme de couleurs. Cette méthode est plus polyvalente et fiable que les modes mix-blend pour garantir la visibilité et la lisibilité du texte.

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!