Explorer les propriétés d'arrière-plan dégradé CSS : background-image et background-size

Exploration des propriétés d'arrière-plan dégradé CSS : background-image et background-size

L'arrière-plan est un élément très important dans la conception Web, qui peut donner à la page un effet visuel plus riche. Dans le passé, vous pouviez définir la couleur d'arrière-plan d'un élément en utilisant la propriété background-color en CSS, mais dans la conception Web moderne, les développeurs peuvent obtenir des effets plus cool grâce à la propriété CSS gradient background. Cet article se concentrera sur l'exploration de deux propriétés CSS clés : background-image et background-size, et donnera des exemples de code spécifiques. L'attribut

background-image est utilisé pour définir l'image d'arrière-plan de l'élément. Dans le passé, les développeurs devaient utiliser la balise en HTML pour ajouter une image d'arrière-plan, mais cette méthode nécessitait des requêtes réseau supplémentaires et augmentait le temps de chargement des pages. Grâce à l'attribut background-image, les développeurs peuvent définir directement l'image d'arrière-plan dans CSS, réduisant ainsi les requêtes réseau et améliorant la vitesse de chargement des pages. La syntaxe de l'attribut

background-image est la suivante :

background-image: url('图片路径');

où url('image path') spécifie l'image d'arrière-plan à utiliser. Les développeurs peuvent utiliser directement le chemin de l’image comme paramètre, ou utiliser des chemins relatifs ou absolus.

En plus d'utiliser une seule image comme arrière-plan, nous pouvons également utiliser des effets de dégradé pour créer un arrière-plan plus cool. CSS propose deux types d'effets de dégradé : les dégradés linéaires et les dégradés radiaux.

Le dégradé linéaire crée un effet de dégradé en spécifiant un point de départ et d'arrivée, ainsi que deux valeurs de couleur ou plus. La syntaxe est la suivante :

background-image: linear-gradient(方向, 颜色值1, 颜色值2, ...);

où la direction peut être une valeur d'angle (comme 45deg) ou un mot-clé de direction (comme vers la droite, vers le bas). La valeur de couleur peut être une valeur de couleur spécifique (telle que #ff0000) ou un mot-clé de couleur (tel que rouge, bleu).

Par exemple, nous pouvons créer un fond dégradé rouge de haut en bas :

background-image: linear-gradient(to bottom, red, #ff0000);

Radial Gradient crée un effet de dégradé en spécifiant un ou plusieurs points et en basant la couleur sur le rayon et le décalage. La syntaxe est la suivante :

background-image: radial-gradient(点位置1, 颜色值1, 点位置2, 颜色值2, ...);

où la position du point peut être une valeur de longueur (telle que 10px, 50%) ou un mot-clé (tel que top, left, center). Les valeurs de couleur peuvent être des valeurs de couleur spécifiques ou des mots-clés de couleur.

Par exemple, nous pouvons créer un arrière-plan dégradé radial qui s'étend vers l'extérieur à partir du centre :

background-image: radial-gradient(circle, red, #ff0000);

La taille de l'image d'arrière-plan peut être ajustée via la propriété background-size pour s'adapter à la taille de la zone d'arrière-plan. La syntaxe de l'attribut background-size est la suivante :

background-size: 宽度 高度;

où la largeur et la hauteur peuvent être des valeurs de pixels spécifiques (telles que 200px, 100%) ou des mots-clés (tels que cover, contain).

Par exemple, nous définissons l'image d'arrière-plan à une taille de 200px × 200px, en utilisant le mot-clé cover pour conserver les proportions adaptées à la zone d'arrière-plan :

background-size: 200px 200px;
background-size: cover;

En utilisant les attributs background-image et background-size, les développeurs peuvent créer Des effets de fond plus riches et plus diversifiés. Explorez et essayez une variété de dégradés et d'images d'arrière-plan différents pour créer des conceptions Web uniques. J'espère que le contenu de cet article vous sera utile et vous êtes invités à essayer d'innover dans des applications pratiques !

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!