Comment obtenir un texte bicolore avec CSS sans dupliquer le contenu ?

Obtention d'un texte bicolore avec CSS

Requête initiale :

Comment pouvez-vous obtenir l'effet d'un texte avec différents couleurs de chaque côté sans dupliquer le contenu ?

Approche conventionnelle :

Une méthode courante consiste à créer deux éléments de texte distincts et à les positionner côte à côte, chacun avec son couleurs d'arrière-plan et de premier plan uniques.

Solution alternative :

Pour minimiser la duplication de contenu, envisagez d'exploiter les propriétés CSS telles que background-clip:text. Cette propriété vous permet d'appliquer un dégradé au texte lui-même, permettant ce qui suit :

Implémentation CSS :

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

Structure HTML :

<div>

Explication :

• Un dégradé est appliqué à l'élément #main, qui englobe le texte.
• L'élément

  L'élément a un dégradé inversé appliqué à son arrière-plan, qui est défini comme couleur d'arrière-plan du texte.

• La propriété background-clip:text restreint le dégradé d'arrière-plan à la zone de texte.
• -webkit- text-fill-color : transparent garantit que le texte est transparent, permettant au dégradé d'arrière-plan d'apparaître.

Cette technique crée un effet de texte bicolore sans nécessiter de contenu dupliqué. En utilisant des effets de fusion, il permet d'obtenir une transition transparente entre les couleurs sans avoir besoin d'éléments de texte supplémentaires.

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!