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 :
Codez comme suit :
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 :
Le code est le suivant :
É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 :
...
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!