Comment insérer deux images d'arrière-plan en même temps en CSS

Lorsque vous utilisez plusieurs images d'arrière-plan, séparez d'abord les valeurs de l'attribut background-image par des virgules et répertoriez les images à utiliser ; puis utilisez background-repeat pour définir l'attribut répétitif et enfin utilisez background-position pour définir la position ; de chaque petite image.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Lorsque vous utilisez plusieurs images d'arrière-plan, séparez simplement les valeurs de l'attribut background-image par des virgules, répertoriez les images que vous souhaitez utiliser, puis utilisez background-repeat pour définir l'attribut de répétition, et enfin utilisez background-position pour définir la position de chaque petite image.

Code HTML:

<div></div>

Code CSS:

background-image: url(images/scroll_top.jpg),
                  url(images/scroll_bottom.jpg),
                  url(images/scroll_middle.jpg);
 
background-repeat: no-repeat, no-repeat, repeat-y;
 
background-position: center top, center bottom, center top;

scroll_top.jpg

scroll_middle.jpg

scroll_bottom.jpg

Utilisez background-repeat et background-position pour définir plusieurs valeur, l'ordre défini correspond respectivement à l'ordre de l'image d'arrière-plan.

Abréviation :

La manière définie ci-dessus peut prêter à confusion, surtout lorsqu'elle doit être réaménagée ou entretenue ultérieurement. Par conséquent, de nombreux concepteurs Web aiment utiliser des abréviations pour spécifier plusieurs images d’arrière-plan.

Code CSS :

background: url(images/scroll_top.jpg) center top no-repeat,
            url(images/scroll_bottom.jpg) center bottom no-repeat,
            url(images/scroll_middle.jpg) center top repeat-y;

Chaque fois qu'une url est utilisée pour définir une image, la position et la méthode de répétition de l'image sont définies.

Points clés :

Plusieurs images d'arrière-plan seront empilées les unes sur les autres, tout comme les calques de Photoshop. L'ordre dans lequel les images d'arrière-plan sont répertoriées détermine quelle image se trouve en haut. La première image répertoriée se trouve au niveau supérieur, la deuxième image est au deuxième niveau et la dernière image est au niveau inférieur. En prenant le code précédent comme exemple, la partie supérieure du parchemin (scrollTop.jpg) est au-dessus du bas du parchemin (scrollBottom.jpg) et la partie inférieure est au-dessus du milieu du parchemin (scrollMiddle.jpg).

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!