Résumé de l'utilisation des attributs d'arrière-plan en CSS

backgroundL'attribut background est un attribut important en CSS. Vous pouvez utiliser l'attribut background pour définir différents styles d'un élément d'arrière-plan, notamment en définissant la couleur de l'arrière-plan rempli, en utilisant votre propre image comme arrière-plan, de sorte que l'image se répète horizontalement et verticalement jusqu'à ce qu'elle recouvre tout l'élément, et en contrôlant la position de l'image d'arrière-plan dans l'élément, etc. L'utilisation d'images comme arrière-plans est souvent rencontrée dans une mise en page de page Web. Généralement, la définition de l'image de l'objet comme instance d'attribut d'arrière-plan définit d'abord la couleur d'arrière-plan, puis définit l'image comme arrière-plan, puis détermine si l'image est répétée, puis la couleur d'arrière-plan. image à la position de l'objet. La couleur d'arrière-plan précédente n'a pas besoin d'être définie et n'est pas obligatoire. Généralement, une image est utilisée comme arrière-plan de l'objet. Si vous souhaitez définir si l'image est affichée de manière répétée, la position de distance sera définie. Le contenu suivant expliquera spécifiquement les différentes utilisations de l’attribut background background.

Vous pouvez d'abord apprendre des cours gratuits liés au site Web chinois php

Apprendre "Tutoriel d'introduction de base CSS 0. " Contexte CSS dans Cours de chapitre

2. Regardez le cours vidéo Arrière-plan et marge dans "Tutoriel vidéo CSS du programmeur Dark Horse"

propriété d'arrière-plan

1. Doit maîtriser les connaissances CSS - propriété d'arrière-plan

Lorsque nous définissons une bordure pour le corps, nous constaterons que la bordure ne renferme que le contenu du corps. Mais définir la couleur d’arrière-plan du corps remplit tout l’écran. Lors de l'utilisation d'une image comme arrière-plan, l'image est positionnée par référence à la zone visible de l'écran, et non à la partie encadrée par la bordure.

Chaque paramètre est séparé par des espaces, suivi de la couleur, de l'image, de la répétition, de la méthode de fixation et de la position.

2.

Attributs liés à l'arrière-plan en CSS

Pourcentage/longueur : S'il s'agit d'un pourcentage, la taille de l'image d'arrière-plan est le produit du conteneur par le pourcentage. . Définissez-en un seul et définissez le second sur automatique (pour conserver le même rapport hauteur/largeur que l'image d'arrière-plan d'origine). Si les deux sont définis à 100 %, l'image d'arrière-plan remplira le conteneur, mais le rapport hauteur/largeur changera.

contain : Le conteneur contient l'intégralité de l'image d'arrière-plan selon une proportion fixe de l'image d'arrière-plan. La taille de l'image d'arrière-plan est agrandie selon une proportion fixe de l'image d'arrière-plan jusqu'à ce qu'un côté atteigne la limite du conteneur, l'autre côté sera souvent vide (en l'absence de répétition).

couverture : l'image d'arrière-plan est agrandie selon un rapport hauteur/largeur fixe jusqu'à ce qu'elle remplisse tout le conteneur (le côté le plus court de l'image d'arrière-plan atteint également la limite du conteneur). Une partie de l’image de fond sera coupée car elle dépasse le conteneur.

3.

Explication détaillée de l'attribut background du CSS

Dans le même élément, l'attribut background composite est écrit à l'avant, et l'attribut background qui doit être défini individuellement est écrit à la fin ; raison : La vague avant du fleuve Yangtze repousse la vague arrière, et la vague avant meurt sur la plage Plusieurs images d'arrière-plan sont ajoutées au même élément. les attributs ne peuvent être écrits que séparément et les abréviations d'attributs composites ne peuvent pas être utilisées

dans les éléments parent-enfant imbriqués, il n'est pas recommandé d'écrire des attributs avec le même nom. Raison : lorsque la taille de l'élément enfant est supérieure ou égale à la taille de l'élément parent, le style de l'élément parent sera écrasé par l'élément enfant

Dans le travail réel, utilisez plus d'images d'arrière-plan ; et moins d'utilisation d'images insérées.

4.

Explication détaillée de la nouvelle série background background en CSS3

border-box : Ignorez la bordure et commencez à carreler directement à partir du point de départ 0,0 du border padding-box : valeur par défaut, ignorer le remplissage et commencer le carrelage directement à partir du point de départ 0,0 du remplissage content-box : commencez le carrelage à partir de la partie contenu et la position de remplissage sera réservée. Donc le rembourrage l'affectera

5. Comment définir l'image d'arrière-plan CSS et la couleur d'arrière-plan dans les pages Web

L'arrière-plan CSS fait référence ici à la définition des attributs d'arrière-plan des objets via CSS, tels que la définition de l'arrière-plan via CSS. CSS dans le style des pages Web.

Fonction d'arrière-plan CSS : définissez un arrière-plan de couleur unie. L'arrière-plan peut définir la couleur d'arrière-plan unie de l'objet et définir l'image comme arrière-plan. Vous pouvez définir l'arrière-plan de l'objet sur une image. Si l'arrière-plan est une image, vous pouvez créer une mosaïque d'image de manière répétée ou horizontale, ou fixer l'image comme arrière-plan de l'objet à n'importe quelle position de l'objet.

6. Résumé et partage des attributs d'arrière-plan CSS et des paramètres d'image d'arrière-plan CSS3

arrière-plan Définir tous les attributs d'arrière-plan dans une seule instruction

ensemble de pièces jointes d'arrière-plan si l'image d'arrière-plan est fixe ou défile avec le reste de la page

background-color Définit la couleur d'arrière-plan de l'élément

background-image Définit l'image d'arrière-plan de l'élément

background- position Définir la position de départ de l'image d'arrière-plan

Questions et réponses associées

1.Comment accélérer. la vitesse de chargement des images d'arrière-plan CSS

2 background:unset ne peut-il pas être utilisé sur iOS ? Alors, que faire si vous souhaitez annuler la couleur d’arrière-plan ?

3. Position d'arrière-plan du corps

[Recommandations associées]

1. Tutoriel gratuit du site Web PHP chinois : 《CSS en ligne manuel》

2. Tutoriel vidéo gratuit sur le site Web chinois php : "Tutoriel vidéo sur l'apprentissage du HTML au bout des doigts"

3. Site chinois : "php.cn Dugu Jiujian (2) - tutoriel vidéo CSS"

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!