Comment créer du texte bicolore en CSS sans dupliquer le contenu ?

Texte bicolore à l'aide de CSS

La question se pose de savoir comment obtenir un effet de texte où un côté a une couleur et un arrière-plan spécifiques tandis que l'autre côté a une couleur et un arrière-plan différents sans dupliquer le contenu. L'exemple fourni présente cet effet en utilisant des divs avec un bloc en ligne et en définissant la largeur, la couleur d'arrière-plan, le débordement et la hauteur de chaque div. À l'intérieur de ces divs, les paragraphes sont définis avec une largeur de 200 % et des couleurs de texte différentes.

Cependant, cette approche nécessite de dupliquer le contenu. Pour éviter cela, une autre technique peut être employée. La propriété CSS Background-clip:text vient à la rescousse. Cette propriété vous permet de définir la région où l'arrière-plan doit être rendu. Dans ce cas, il peut être défini sur « texte », ce qui appliquera l'arrière-plan au texte lui-même.

Avec cette technique, vous pouvez créer un arrière-plan dégradé pour le texte, permettant différentes combinaisons de couleurs de chaque côté. . Le code CSS et HTML suivant illustre cette approche :

#main {
  background: linear-gradient(to right, red 50%, #fff 50%);
}

#main>p {
  background: linear-gradient(to left, blue 50%, #fff 50%);
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

<div>

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!