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 :

88ec3091817142757563c63a206d98b3 = Linear-gradient([ [ 0c0cb308ee3d2ee3281772bfc9b806c2| to a12f3a7ec61a4fc962528b92ac9c3e4c ] ,] ? 9abf9243314f6d1cd71ac1087d19db3b[, 9abf9243314f6d1cd71ac1087d19db3b]+)

1329f31897682e3e226113da5002c323 = [gauche | ]

9abf9243314f6d1cd71ac1087d19db3b = 58e5818119a4297b91ea18a7eda9e5f0 [ 2a75a15f669cc57577925f1739d1a463 ]?

d907771b9796ac44f0a38589ace9c371 : 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

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

b10fb37415d019cfffa8c4d7366c607f : spécifier la couleur

d82af2074b26fcfe177e947839b5d381 : 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

0d9440149a08e357469e9125c806cdcb : 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!