Interprétation des propriétés d'arrière-plan dégradé CSS : Linear-gradient et background-image

Interprétation des attributs d'arrière-plan dégradé CSS : gradient linéaire et image d'arrière-plan

Introduction :
Dans le développement de pages, la sélection de la couleur d'arrière-plan est un lien très important, et la couleur d'arrière-plan dégradé peut ajouter des effets visuels plus riches au Web page . CSS propose deux manières d'implémenter les propriétés d'arrière-plan dégradé : Linear-gradient et background-image. Cet article se concentrera sur l’explication de l’utilisation de ces deux méthodes et fournira des exemples de code spécifiques.

1. Linear-gradient :
Linear-gradient est une fonction de CSS qui peut obtenir un effet de dégradé d'une couleur à une autre en spécifiant la couleur de début et la couleur de fin. Sa syntaxe de base est la suivante :
background-image: Linear-gradient(direction, color-stop1, color-stop2, ...);

1. direction : Spécifie la direction du dégradé, qui peut être l'une des valeurs suivantes :

   • vers le haut：de bas en haut
   • vers le bas：de haut en bas
   • à gauche：de droite à gauche
   • à droite：de gauche à droite
   • en haut à gauche：de bas à droite en haut à gauche
   • en haut à droite : Du bas à gauche vers le haut à droite
   • en bas à gauche : Du haut à droite vers le bas à gauche
   • en bas à droite : Du haut à gauche vers le bas à droite
2. color-stop : Spécifiez la couleur de le dégradé, qui peut être une valeur de couleur spécifique ou une valeur relative. La valeur de la relation (par exemple : 50 % représente la couleur à mi-chemin dans la direction actuelle). Il peut y avoir plusieurs valeurs d'arrêt de couleur, séparées par des virgules.

Ce qui suit est un exemple montrant l'effet de dégradé de bas en haut :

div { background-image: linear-gradient(to top, #ff0000, #00ff00); }

2. background-image :
En plus d'utiliser la fonction de dégradé linéaire, vous pouvez également utiliser l'attribut background-image pour obtenir un effet de fond dégradé. Cette méthode est plus flexible et peut ajouter des images ou des transitions vers d'autres éléments du dégradé. La syntaxe de base est la suivante :
background-image: url(image.png), Linear-gradient(direction, color-stop1, color-stop2, ...);

1. url(image.png) : Spécifiez le effet de fond dégradé Le chemin de l'image peut être un chemin relatif ou un chemin absolu. Si vous n'avez pas besoin d'ajouter une image, vous pouvez omettre cette section.
2. linear-gradient : Utilisé de la même manière que la fonction Linear-gradient, utilisée pour spécifier l'effet de dégradé.

Voici un exemple montrant l'effet de dégradé de gauche à droite et l'ajout d'une image :

div { background-image: url(image.png), linear-gradient(to right, #ff0000, #00ff00); }

En résumé, les propriétés line-gradient et background-image de CSS fournissent un moyen d'obtenir une méthode d'effet de fond dégradé. Vous pouvez choisir d'utiliser différentes méthodes en fonction de différents besoins et ajuster les paramètres de manière flexible pour obtenir des effets de dégradé riches et diversifiés. Ce qui précède est une interprétation des deux propriétés et fournit des exemples de code spécifiques. J'espère que cela sera utile aux lecteurs.

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!