Le résumé le plus complet des balises d’arrière-plan en CSS

Nous utilisons souvent l'arrière-plan dans le développement CSS. Cet article vous apporte principalement un résumé de l'arrière-plan CSS. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence, j'espère que cela pourra aider tout le monde.

Toutes les propriétés d'arrière-plan ne peuvent pas être héritées.

1. background-color

Tous les éléments peuvent définir la couleur d'arrière-plan.

La valeur par défaut de background-color est transparente ; c'est-à-dire que si un élément ne spécifie pas de couleur d'arrière-plan, l'arrière-plan est transparent afin que l'arrière-plan de ses éléments ancêtres soit visible.

2. background-image

Tous les éléments peuvent définir des images d'arrière-plan ;

Plusieurs images d'arrière-plan peuvent être définies, séparées par des virgules ; devant est en haut.

3. répétition d'arrière-plan

répétition (par défaut)/no-repeat/repeat-x/ répétition-y

4. scroll (par défaut)/fixed

5. background-position

Méthode Pixel : en prenant le coin supérieur gauche de l'image comme point de départ, la première valeur est la distance de mouvement horizontale et la la deuxième valeur est la distance de mouvement vertical ; si une seule valeur est spécifiée, la deuxième valeur est par défaut de 50 % ;

Méthode du pourcentage : le pourcentage est appliqué à la fois à l'image et à l'élément, et les points correspondants se chevauchent pour le positionnement. Si vous spécifiez uniquement un pourcentage, cela signifie que la direction verticale est de 50 %.

Méthode des mots clés : haut, droite, bas, gauche, centre pour un positionnement combiné ; si une seule valeur est spécifiée, la deuxième valeur est par défaut centre.

Remarque : la position d'arrière-plan peut être négative.

Par défaut, la couleur d'arrière-plan s'étend en dessous de la bordure et l'image d'arrière-plan se trouve dans le coin supérieur gauche de la zone de remplissage.

6. background-size

Définissez la taille de l'image d'arrière-plan ; la valeur par défaut est auto.

Méthode Pixel : la première valeur définit la largeur et la deuxième valeur définit la hauteur ; s'il n'y a qu'une seule valeur, la deuxième valeur est automatique.

Méthode de pourcentage : calculée en fonction de la largeur et de la hauteur de l'élément parent.

Le mot-clé cover ne modifie pas le rapport hauteur/largeur de l'image et couvre l'intégralité de l'élément à la fois horizontalement et verticalement, ce qui peut provoquer un débordement d'une partie de l'image.

Le mot-clé contain ne modifie pas le rapport hauteur/largeur de l'image et l'étire autant que possible jusqu'à ce que tout l'élément soit couvert dans une direction, ce qui peut avoir pour conséquence que l'autre direction ne soit pas couverte.

7. background-origin

Définissez la position initiale de l'image d'arrière-plan

border-box, le coin supérieur gauche de la bordure.

padding-box, coin supérieur gauche de la zone de remplissage ; valeur par défaut.

content-box, coin supérieur gauche de la zone de contenu.

8. background-clip

La propriété CSS3 background-clip spécifie la zone de peinture de l'arrière-plan.

La propriété prend trois valeurs différentes :

•border-box - (par défaut) l'arrière-plan est peint jusqu'au bord extérieur de la bordure

•padding-box - l'arrière-plan est peint jusqu'au bord extérieur du rembourrage

• content- box - l'arrière-plan est peint dans la zone de contenu

(l'explication en anglais est plus claire)

(les anglais sont tous déplacés de W3Schools Online)

À propos de l'arrière-plan -origin et background-clip, ils sont indépendants l'un de l'autre et n'interfèrent pas les uns avec les autres.

Concernant la méthode d'écriture CSS du background, je pense personnellement qu'elle doit être logique et hiérarchique ; plus précisément :

background définit l'image d'arrière-plan, background-color définit la couleur d'arrière-plan et background-clip définit la zone d'affichage d'arrière-plan.

(Avis personnel, pour référence seulement)

Image d'arrière-plan en taille réelle

Si nous voulons avoir une image d'arrière-plan sur un site Web qui couvre à tout moment toute la fenêtre du navigateur .

Les exigences sont les suivantes :

• Remplissez la page entière avec l'image (pas d'espace blanc)

• Redimensionnez l'image selon vos besoins

• Centrer l'image sur la page

• Ne pas provoquer de barres de défilement

L'exemple suivant montre comment procéder ; Utilisez l'élément html (l'élément html est toujours au moins à la hauteur de la fenêtre du navigateur). Définissez ensuite un arrière-plan fixe et centré dessus. Ajustez ensuite sa taille avec la propriété background-size :

Le code CSS copie le contenu dans le presse-papiers

html {
background: url(img_flower.jpg) centre sans répétition corrigé
background-size: cover
} 
Conseils :

Utilisez le carrelage horizontal de l'image d'arrière-plan pour obtenir un effet de bordure ondulée.

(Actuellement, je n'ai que des idées et je n'ai trouvé aucune image qui répond à mes besoins.)

Recommandations associées :

Introduction de base à l'arrière-plan CSS- attribut de pièce jointe

Cinq façons CSS d'utiliser des tableaux pour implémenter des mises en page communes

Introduction détaillée CSS3 à l'attribut background-size

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!