Comment utiliser les dégradés CSS3 pour obtenir des dégradés de couleurs de texte ?

Dans la conception de sites Web récente, j'ai l'impression qu'il y a de plus en plus de designs contenant des dégradés. Cette fois, nous présenterons comment appliquer des dégradés CSS3 au texte et comment remplir des images sur du texte.

Appliquer un dégradé de couleurs sur le texte

Il s'agit d'une couleur dégradée définie comme couleur d'arrière-plan du texte. Les navigateurs actuellement pris en charge sont Google Chrome, Safari et Opera. (Cours recommandé : Tutoriel vidéo CSS3)

HTML

<h1>你好，PHP中文网</h1>

HTML répertorie le texte à dégradé tel quel.

CSS

h1{
  color: #ACB6E5;
  background: -webkit-linear-gradient(90deg, #ACB6E5, #86FDE8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

L'effet est le suivant :

Vous pouvez également changer la position de la couleur en spécifiant l'angle du dégradé pour en faire une texture un peu rugueuse.

CSS

h1{
  color: #FF7C00;
  background: -webkit-linear-gradient(top, #FFB76B 0%, #FFA73D 50%, #FF7C00 51%, #FF7F04 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

L'effet est le suivant :

Utilisez une image pour remplir la couleur du texte

En plus de définir la couleur du dégradé comme couleur d'arrière-plan, vous pouvez également utiliser une image pour définir la couleur de la police.

Utilisons cette image pour définir la couleur de l'arrière-plan

Le code est le suivant :

	
	


<h1>你好，PHP中文网</h1>

L'effet est le suivant :

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!