Tout le monde devrait être familier avec l'attribut background background-image. Dans CSS2, ses attributs associés incluent background-repeat (définir si l'arrière-plan est répété et comment le répéter), background-position (définir l'image d'arrière-plan dans le conteneur). ) position), background-attachment (définissant si l'arrière-plan défile avec la page), utilisez ces propriétés pour contrôler la façon dont l'image d'arrière-plan est affichée dans le conteneur, mais nous ne pouvons fournir qu'une seule image d'arrière-plan pour le conteneur si nous voulons un conteneur. L’arrière-plan est implémenté avec plusieurs images, alors comment 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-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
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, mais un seul autre attribut (par exemple Il y en a). une seule répétition d'arrière-plan), cette valeur d'attribut est alors appliquée à toutes les images d'arrière-plan.
L'abréviation ci-dessus peut être décomposée sous la forme suivante :
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;
Remarque :
Séparez la valeur de l'abréviation de chaque groupe d'arrière-plan par des virgules <🎜 ; >
S'il y a une valeur de taille, elle doit être suivie de la position et séparée par "/"
S'il y a plusieurs images d'arrière-plan, mais 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), indiquant que cette valeur d'attribut s'applique à toutes les images d'arrière-plan.
background-color ne peut être défini que sur un.
Regardons un exemple :
Ici, nous voulons utiliser 5 images comme arrière-plan d'un conteneur div :
Code HTML :
<div class="div1">
<a href="http://ask.php.cn/" title="BeyondWeb-分享知识，分享快乐">php中文网</a> </div>
Code CSS :
.div1{
margin:50px auto;
width:700px;
height:450px;
border:10px dashed #ff00ff;
background-image:url(http://www.jnnews.tv/_CMS_NEWS_IMG_/www2/2011-04/20/sy/cms_9266e59e30584f02b09200b15f96a29f_0364_10_49_34.jpg),url(http://image27.360doc.com/DownloadImg/2011/04/2513/11209781_14.jpg),url(http://s6.sinaimg.cn/bmiddle/4efc7f58ge08613748ce6&690),url(http://imgsrc.baidu.com/forum/w%3D580/sign=79520e92632762d0803ea4b790ed0849/8a6104a4462309f740ec1ca3720e0cf3d6cad6a8.jpg),url(http://img1.3lian.com/2015/w7/85/d/101.jpg);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
}Dans le code ci-dessus, il y a cette phrase :
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
En fait, on peut la simplifier, car elle a a déjà été mentionné : « s'il y a plusieurs images d'arrière-plan, mais 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 est appliquée à toutes les images d'arrière-plan. » Cela peut donc être simplifié en :
background-repeat:no-repeat;
Écrivez simplement une valeur et l'effet est exactement le même.
Bien sûr, lors de la définition des différents attributs de l'image d'arrière-plan ci-dessus, ils sont écrits séparément, nous pouvons donc également écrire les différents attributs de l'image d'arrière-plan ensemble. Le code CSS à ce moment est le suivant :
.div1{
background:url(http://www.jnnews.tv/_CMS_NEWS_IMG_/www2/2011-04/20/sy/cms_9266e59e30584f02b09200b15f96a29f_0364_10_49_34.jpg) no-repeat top left,
url(http://image27.360doc.com/DownloadImg/2011/04/2513/11209781_14.jpg) no-repeat top right,
url(http://s6.sinaimg.cn/bmiddle/4efc7f58ge08613748ce6&690) no-repeat bottom left,
url(http://imgsrc.baidu.com/forum/w%3D580/sign=79520e92632762d0803ea4b790ed0849/8a6104a4462309f740ec1ca3720e0cf3d6cad6a8.jpg) no-repeat bottom right,
url(http://img1.3lian.com/2015/w7/85/d/101.jpg) no-repeat center center;
}
section suivante
