Utilisez CSS3 pour implémenter un dégradé de couleurs d'arrière-plan

Cet articleprésenteUtiliser CSS3 pour obtenir des dégradés de couleurs d'arrière-plan

Concept de couleur de dégradé CSS :

Les dégradés CSS (Gradients) nous permettent d'utiliser un dégradé de couleurs L'effet modifie un espace - passe d'une couleur à une autre - remplit l'espace. Il existe deux formes de dégradés de couleurs : linéaire (dégradé linéaire) et radial (dégradé circulaire). De toute évidence, la technologie CSS de dégradé de couleurs (Gradients) produit un effet de motif visuel, et obtenir cet effet visuel est très simple et peut être obtenu grâce à une simple programmation. Les dégradés CSS ont été introduits très tôt dans CSS3, mais la promotion de cette technologie a pris beaucoup de temps.

Syntaxe de base de la technologie de dégradé CSS :

Format de code unifié

background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]*)

Le le premier paramètre est le point de départ ou l’angle du dégradé. Le deuxième paramètre est un arrêt de couleur. Au moins deux couleurs sont requises (point de départ et point final), et vous pouvez ajouter n'importe quelle couleur pour augmenter la richesse du dégradé de couleurs. La définition d'un point d'arrêt de couleur peut être une couleur, ou une couleur plus un pourcentage :

/*  color-stop(percentage/amount, color) */
color-stop(0.20, red)

Ce code suivant L'extrait inclut essentiellement toutes les situations de dégradés de couleurs descendants :

{	/* 底色 */
	background-color: #063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), 
　　　　　color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);	
　　　　　/* firefox; multiple color stops */
	background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);	
　　　　 /* ie 6+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
	/* ie8 + */
　　　　　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";	
　　　　 /* ie10 */
	background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
	/* opera 11.1 */
	background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
	/* 标准写法 */
	background-image: linear-gradient(#063053, #395873, #5c7c99);
}

La technologie de dégradés CSS prend également en charge les angles Direction du dégradé, comme le dégradé d'angle de 45 degrés :

/* fallback */
	background-color:#063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), 
　　　　　color-s top(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* ie10 */
	background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
	/* opera 11.1 */
	background-image: -o-linear-gradient(45deg, #063053, #395873);
	/* The "standard" */
	background-image: linear-gradient(45deg, #063053, #395873);
}

La technologie CSS de dégradé de couleurs (Gradients) est précieuse, mais parfois difficile à mettre en œuvre. Parfois, vous avez déjà implémenté le dégradé souhaité et la prise en charge du navigateur peut devenir un problème. Voici quelques suggestions pour utiliser les dégradés de couleurs CSS (Dégradés) :

• Vous souhaitez que vos dégradés de couleurs CSS (Dégradés) affichent un certain degré de transparence ? Utilisez des couleurs rgba.

• Utilisez la couleur d'arrière-plan comme fond pour vous éviter de ne remarquer accidentellement aucune couleur lorsque le navigateur ne la prend pas en charge.

• Firefox et Google Chrome prennent tous deux en charge le dégradé linéaire répétitif et le dégradé radial répétitif. L'utilisation est :

<.>

background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);

background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);

Effet :

Dégradé linéaire de couleur de base, de haut en bas

Dégradé linéaire de couleur de base, angle de 45 degrés (Chrome, Safari, Firefox, IE10, Opera)

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!