Implémentation de plusieurs arrière-plans en partageant des exemples CSS3

Tout le monde devrait être familier avec l'attribut d'arrière-plan background-image Dans CSS2, ses attributs associés incluent background-repeat (comment définir si l'arrière-plan est répété et comment répéter. it) ), background-position (définir la position de l'image d'arrière-plan dans le conteneur), background-attachment (définir si l'arrière-plan défile avec la page), utilisez ces attributs pour contrôler la position de l'image d'arrière-plan dans le conteneur Comment l'afficher dans le conteneur, mais nous ne pouvons fournir qu'une seule image d'arrière-plan pour le conteneur Si nous voulons utiliser plusieurs images pour l'arrière-plan d'un conteneur, comment devons-nous procéder ? Ajouter des éléments inutiles au conteneur ?

La naissance de CSS3 a résolu ce problème pour nous. Dans CSS3, plusieurs images d'arrière-plan peuvent être définies pour un conteneur via background-image ou background, ce qui signifie que différentes images d'arrière-plan peuvent être placées dans une seule à l'intérieur du conteneur. élément de bloc.

Jetons d'abord un coup d'œil à la syntaxe :

background : [background-image] | [ background-repeat] | [background-size] | [background-attachment] | [background-position]Utilisez des virgules pour séparer les URL de plusieurs images d'arrière-plan. , s'il y a plusieurs images d'arrière-plan et qu'il n'y a qu'un seul autre attribut (par exemple, il n'y a qu'une seule répétition d'arrière-plan), alors cette valeur d'attribut sera appliquée à toutes les images d'arrière-plan.

Regardons un exemple :

Ici, nous voulons utiliser 5 images comme arrière-plan d'un conteneur p :

Code HTML. :

Le code est le suivant :

Script House

Code CSS :

Codez comme suit :

.p1{

margin:50px auto;
width:700px;
height:450px;
border:10px dashed #ff00ff;

image d'arrière-plan:url(images/1.jpg),url(images/2.jpg),url(images/3.jpg),url(images/4.jpg),url(images/5 .jpg) ;
background-repeat : pas de répétition, pas de répétition, pas de répétition, pas de répétition, pas de répétition ;
background-position : haut à gauche, haut à droite, bas à gauche, bas à droite, centre centre ;
}


L'effet est le suivant :

Dans le code ci-dessus il y a cette phrase :

Le code est le suivant :

background-repeat:no-repeat;

Écrivez simplement une valeur, l'effet est exactement pareil.

Bien sûr, lors de la définition des différents attributs de l'image de fond ci-dessus, ils sont écrits séparément, nous pouvons donc également écrire les différents attributs de l'image de fond ensemble. Dans ce cas, le code CSS est le suivant :

Le code est le suivant :

.p1{

...
background:url(images/1. jpg) pas de répétition en haut à gauche,
url (images/2.jpg) pas de répétition en haut à droite,
url(images/3.jpg) pas de répétition en bas à gauche,
url(images/4 .jpg) sans répétition en bas à droite,
url(images/5.jpg) sans répétition centre centre;
...
}


Oh, c'est comme ça CSS3 plusieurs arrière-plans fonctionnent, c'est très simple. Le code source complet et des exemples sont fournis ci-dessous, qui peuvent être utilisés comme référence.

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!