Pouvez-vous avoir du texte en deux couleurs sans duplication de contenu ?

Obtenir des effets de texte bicolores sans duplication de contenu

Le défi de créer un texte avec des couleurs différentes sur des côtés opposés soulève la question de savoir s'il est Il est possible d'obtenir cet effet sans dupliquer le contenu.

Dégradé d'arrière-plan et découpage du texte

Une solution consiste à utiliser la propriété background-clip:text de CSS. En créant un dégradé linéaire en arrière-plan, vous pouvez colorer le texte avec une transition douce entre deux couleurs. La combinaison de cela avec background-clip:text limite l'arrière-plan au texte lui-même, permettant au contenu sous-jacent d'apparaître.

Exemple de code :

#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>

Remplissage de texte transparent

Le -webkit-text-fill-color : transparent ; et couleur : transparent ; Les propriétés rendent la couleur du texte transparente, permettant à la couleur d'arrière-plan de s'afficher entièrement.

Cette méthode élimine le besoin de duplication de contenu tout en permettant au texte d'avoir des couleurs différentes sur les côtés opposés. La technique utilise les effets de fusion de CSS pour créer un affichage de texte visuellement attrayant et dynamique.

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!