Implémentation de plusieurs arrière-plans en partageant des exemples CSS3 (Arrière-plans multiples)_CSS/HTML

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 un seul élément de bloc.

Jetons d’abord un coup d’œil à la grammaire :

arrière-plan : [image d'arrière-plan] | [origine-arrière-plan] | [clip d'arrière-plan] | 🎜>

Utilisez des virgules pour séparer les URL de plusieurs images d'arrière-plan. S'il existe 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 à tous les arrière-plans. images.

Regardons un exemple :

Ici, nous allons utiliser 5 images comme arrière-plan d'un conteneur div. Jetons un coup d'œil au code :

Code HTML :

Copier le code Le code est le suivant :

Script House

Code CSS :

Copier le code Le code est le suivant :

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

background-image: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 ;
position d'arrière-plan : en haut à gauche, en haut à droite, en bas à gauche, en bas à droite, au centre ;
}

L'effet est le suivant :

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

Copier le code Le code est le suivant :

background-repeat:no-repeat;

Écrivez simplement une valeur, l'effet est exactement le même.

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 :

Copier le code Le code est le suivant :

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

Oh, c'est comme ça que fonctionnent les arrière-plans multiples CSS3. 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.