Comment puis-je ajuster dynamiquement la couleur du texte en fonction de la couleur d'arrière-plan à l'aide de dégradés CSS ?

Adaptation de la couleur du texte sur différents arrière-plans

À la recherche d'une conception de barre de progression, vous cherchez à ajuster dynamiquement la couleur du texte en fonction du sous-jacent teinte de fond. Plus précisément, vous visez un texte noir/gris foncé sur des arrière-plans clairs, un texte noir/gris foncé sur des arrière-plans modérément clairs et un texte blanc sur des arrière-plans sombres.

Tentatives initiales utilisant le mode mix-blend et d'autres filtres n’ont pas réussi à obtenir l’effet souhaité. Cependant, une solution viable consiste à utiliser un dégradé supplémentaire pour la coloration du texte sans recourir au mode mix-blend.

Style CSS amélioré

Implémentez le code CSS suivant pour obtenir l'adaptation de la couleur du texte souhaitée :

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

HTML Balisage

Dans l'élément .container, placez votre contenu texte enveloppé dans un élément .text :

<div class="container">
  <div class="text">Some text here</div>
</div>

Explication

Le un dégradé supplémentaire dans .text établit un dégradé du blanc au noir, avec la couleur transparente définie comme remplissage du texte. Cela permet à l'arrière-plan sous-jacent de se fondre avec le texte, ce qui entraîne l'effet d'adaptation des couleurs 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!