Comment utiliser la couleur d'arrière-plan dégradé CSS3, compatible avec IE9+

La couleur d'arrière-plan, en plus de la couleur unie, peut également utiliser une variété de combinaisons de couleurs pour former des couleurs d'arrière-plan dégradées afin d'enrichir la page.

Les arrière-plans dégradés sont divisés en deux types :

1. Dégradé linéaire

2. >

Dégradé linéaire

Le dégradé linéaire est divisé en trois types : les dégradés horizontaux, verticaux et diagonaux

Syntaxe :

= Linear-gradient([ [ | to ] ,] ? [, ]+)

= [gauche | ]

= [ ]?

< angle> : utilisez la valeur d’angle pour spécifier la direction du dégradé.

à gauche : définir le dégradé de droite à gauche ;

à droite : définir le dégradé de gauche à droite ;

vers le haut : définissez le dégradé de bas en haut ;

vers le bas : définissez le dégradé de haut en bas

 : définir les couleurs de début et de fin du dégradé spécifié

 : spécifier la couleur

 : utilisez la valeur de longueur pour spécifier les positions de couleur de début et de fin. Les valeurs négatives ne sont pas autorisées

 : utilisez le pourcentage pour spécifier les positions de couleur de début et de fin.

background:linear-gradient (paramètre 1, paramètre 2, paramètre 3, paramètre 4....paramètre N)

Paramètre 1 : Il peut être renseigné ou non. S'il est renseigné, écrivez la direction telle que : vers la droite, ce qui signifie que le sens du dégradé est de gauche à droite. S'il n'est pas renseigné, le dégradé sera de haut en bas. en bas par défaut.

Paramètre 1' : fondamentalement le même que le paramètre 1, écrit avec le préfixe -webkit-,-moz-,-o-, tel que : gauche représente la position où commence la direction du dégradé Paramètre 2 : Couleur de départ du dégradé, vous pouvez remplir rgba() ou #fff ou blanc, suivi d'un pourcentage pour représenter la proportion de couleur, comme #fff 50% représente 50% de blanc.

Paramètre 3 : S'il n'y a pas de paramètre par la suite, c'est la couleur de fin du dégradé, qui est cohérente avec l'attribut facultatif du paramètre 2.

Paramètre 4....Paramètre N : Noeud de couleur dégradé pouvant être ajouté. La dernière est la couleur de fin du dégradé

Exemple

 :

linear-gradient(#fff, #75aaa3);
 linear-gradient(to bottom, #fff,#75aaa3); 
linear-gradient(to top, #75aaa3, #fff); 
linear-gradient(180deg, #fff, #75aaa3); 
linear-gradient(to bottom, #fff 0%, #75aaa3 100%);

Cependant, un navigateur compatible est également requis :

//从下至上
#text.btt{
background: -webkit-linear-gradient(bottom,#fff, #75aaa2);
background: -o-linear-gradient(bottom,#fff, #75aaa2);
background: -moz-linear-gradient(bottom,#fff, #75aaa2);
background: linear-gradient(to top,#fff, #75aaa2); /* 标准的语法（必须放在最后） */
}

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!