Résumé des connaissances communes sur la mise en page CSS (arrière-plan de la page)

Il y a beaucoup de connaissances en CSS, et il nous est impossible de tout retenir. Pendant mon temps libre, j'ai compilé quelques connaissances communes sur la mise en page CSS. Cet article partagera avec vous les connaissances communes sur l'arrière-plan des pages CSS. Les amis dans le besoin peuvent s'y référer, j'espère que cela pourra vous aider.

1. Définir la couleur d'arrière-plan

CSS fournit l'attribut background-color pour définir la couleur d'arrière-plan de la page.

Exemple : couleur d'arrière-plan : rouge ;

2. Définir l'image d'arrière-plan

Ajouter une image à la page

Syntaxe : < ; img src="pic.jpg"/>

Ajouter une image d'arrière-plan à la page

CSS fournit l'attribut background-image pour ajouter directement une image d'arrière-plan à la page.

Syntaxe : background-image : url (pic.jpg);

(1) Mosaïque des images d'arrière-plan

CSS fournit la propriété background-repeat définit la méthode de mosaïque de l'image d'arrière-plan. Il existe quatre attributs : répéter (l'image d'arrière-plan est en mosaïque horizontale et verticale), no-repeat (l'image d'arrière-plan n'est pas en mosaïque horizontalement), répéter-x (l'image d'arrière-plan est en mosaïque horizontalement), répéter-y (l'image d'arrière-plan est en mosaïque horizontalement et verticalement). carrelé verticalement).

Syntaxe : background-repeat : repeatmode;

(2) Position de l'image d'arrière-plan

CSS fournit l'attribut background-position pour définir la image d’arrière-plan et position relative de la page.

Syntaxe : background-position : position;

Où la position peut être déterminée à l'aide d'unités de longueur, de pourcentages et de mots-clés.

Utiliser l'unité de longueur : background-position : 10px 20px (l'image d'arrière-plan traduit 10px le long de l'axe x et 20px le long de l'axe y)

Utiliser le pourcentage : background-position : 30 % 30%;

Utilisez les mots-clés : background-position : right bottom ; Les valeurs d'attribut incluent gauche, centre et droite dans le sens horizontal et haut, centre et bas dans le sens vertical.

(3) Images d'arrière-plan fixes et défilantes

CSS fournit l'attribut background-attachment. La valeur de l'attribut scroll indique que l'image d'arrière-plan défile avec le contenu de l'objet ; fixe indique que l'image d'arrière-plan est fixe.

Exemple : background-attachment : fixe ;

3. Attributs d'arrière-plan de la page

Attributs background-image, background-position, background-repeat, Les quatre attributs de background-attachement peuvent être abrégés en utilisant background.

Exemple : arrière-plan : url (pic.jpg) 10px 20px répétition corrigée ;

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!