Maison > Article > interface Web > 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 :
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 :