plusieurs arrière-plansPlusieurs arrière-plans

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.

<div class="div1">
    <a href="http://ask.php.cn/" title="BeyondWeb-分享知识，分享快乐">php中文网</a> </div>

.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;
    
}

background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;

background-repeat:no-repeat;

.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; 
}