對(duì)于背景屬性background-image大家應(yīng)該已經(jīng)很熟悉了，在CSS2中與它相關(guān)的屬性還有background-repeat（設(shè)置背景是否重復(fù)及重復(fù)的方式）、background-position（設(shè)置背景圖片在容器中的位置）、background-attachment（設(shè)置背景是否隨頁(yè)面一起滾動(dòng)），通過(guò)這些屬性來(lái)控制背景圖片在容器中如何顯示，但我們也只能為容器提供一張背景圖片，如果我們想讓一個(gè)容器的背景用多張圖片實(shí)現(xiàn)，那么我們?cè)撊绾稳プ瞿?？再在容器里添加一些無(wú)用的元素嗎？

CSS3的誕生為我們解決了這一問(wèn)題，在CSS3里，通過(guò)background-image或者background可以為一個(gè)容器設(shè)置多張背景圖像，也就是說(shuō)可以把不同背景圖象只放到一個(gè)塊元素里。

首先我們來(lái)看一下語(yǔ)法吧：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

多個(gè)背景圖片的url之間使用逗號(hào)隔開(kāi)即可，如果有多個(gè)背景圖片，而其他屬性只有一個(gè)（例如background-repeat只有一個(gè)），那么所有背景圖片都應(yīng)用該屬性值。

可以把上面的縮寫(xiě)拆解成以下形式：

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;

注意：

用逗號(hào)隔開(kāi)每組 background 的縮寫(xiě)值；

如果有 size 值，需要緊跟 position 并且用 "/" 隔開(kāi)；

如果有多個(gè)背景圖片，而其他屬性只有一個(gè)（例如 background-repeat 只有一個(gè)），表明所有背景圖片應(yīng)用該屬性值。

background-color?只能設(shè)置一個(gè)。

下面我們就看一個(gè)例子吧：

這里我們要使用5張圖片作為一個(gè)div容器的背景，我們來(lái)看一下代碼：

HTML代碼：

<div class="div1">
    <a href="http://ask.php.cn/" title="BeyondWeb-分享知識(shí)，分享快樂(lè)">php中文網(wǎng)</a> </div>

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

在上面的代碼中有這一句：

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

其實(shí)是可以簡(jiǎn)化的，因?yàn)樵谇懊嬉呀?jīng)提到“如果有多個(gè)背景圖片，而其他屬性只有一個(gè)（例如background-repeat只有一個(gè)），那么所有背景圖片都應(yīng)用該屬性值?！币虼丝梢院?jiǎn)化為：

background-repeat:no-repeat;

寫(xiě)一個(gè)值就行了，效果是完全一樣的。

當(dāng)然上面設(shè)置背景圖片的各個(gè)屬性時(shí)是分開(kāi)寫(xiě)的，那么我們也可以把背景圖片的各個(gè)屬性寫(xiě)在一塊，這時(shí)的CSS代碼如下：

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