Introduction récapitulative de l'arrière-plan CSS

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 une image d'arrière-plan

Plusieurs images d'arrière-plan peuvent être définies, séparées par des virgules ; l'image sera en cascade, avec le calque écrit dans le calque précédent au-dessus.

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

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

4. background-attachment

scroll (par défaut)/fixed

5. background-position

Méthode des pixels : en commençant par le coin supérieur gauche de l'image, la première valeur est la distance de mouvement horizontal, la deuxième valeur est la distance de mouvement vertical si une seule valeur est spécifiée, la deuxième valeur par défaut est 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 sous 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, 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, mais 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 types différents valeurs :

•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 remplissage

•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)

Concernant background-origin et background-clip, ils sont indépendants l'un de l'autre et n'interfèrent pas entre eux.

Concernant la méthode d'écriture CSS du background, je pense personnellement qu'elle devrait être logiquement claire et hiérarchique spécifiquement :

background définit l'image de fond ; , 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 toute la fenêtre du navigateur à tout moment.

Les exigences sont les suivantes :

• Remplir toute la page avec l'image (pas d'espace blanc)

• Redimensionner l'image selon les besoins

• Centrer l'image sur la page

• Ne pas provoquer de barres de défilement

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

html {   
     background: url(img_flower.jpg) no-repeat center fixed;    
     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éponde à mes besoins.)

Le résumé ci-dessus de l'arrière-plan CSS est tout le contenu partagé par l'éditeur, j'espère qu'il pourra le faire. Je vous donne une référence, j'espère aussi que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'introduction au résumé de l'arrière-plan CSS et aux articles connexes, veuillez faire attention au site Web PHP chinois !