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 :

Code CSS :

L'effet est le suivant :

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

É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 :

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.