multiple backgrounds多背景

對於背景屬性background-image大家應該已經很熟悉了，在CSS2中與它相關的屬性還有background-repeat（設定背景是否重複及重複的方式）、background-position（設定背景圖片在容器中的位置）、background-attachment（設定背景是否隨頁面一起滾動），透過這些屬性來控制背景圖片在容器中如何顯示，但我們也只能為容器提供一張背景圖片，如果我們想讓一個容器的背景用多張圖片實現，那我們該如何做呢？再在容器裡加入一些無用的元素嗎？

CSS3的誕生為我們解決了這個問題，在CSS3裡，透過background-image或background可以為一個容器設定多張背景影像，也就是說可以把不同背景圖像只放到一個塊元素裡。

首先我們來看看語法吧：

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

多個背景圖片的url之間使用逗號隔開即可，如果有多個背景圖片，而其他屬性只有一個（例如background-repeat只有一個），那麼所有背景圖片都套用該屬性值。

可以把上面的縮寫拆解成以下形式：

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;

注意：

用逗號隔開每組background 的縮寫值;

如果有size 值，需要緊接position 並且用"/" 隔開；

如果有多個背景圖片，而其他屬性只有一個（例如background-repeat 只有一個），表示所有背景圖片都套用該屬性值。

background-color 只能設定一個。

#下面我們就看一個例子吧：

這裡我們要使用5張圖片作為一個div容器的背景，我們來看看程式碼：

HTML程式碼：

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

其實是可以簡化的，因為在前面已經提到「如果有多個背景圖片，而其他屬性只有一個（例如background-repeat只有一個），那麼所有背景圖片都應用該屬性值。完全一樣的。

當然上面設定背景圖片的各個屬性時是分開寫的，那麼我們也可以把背景圖片的各個屬性寫在一塊，這時的CSS程式碼如下：

background-repeat:no-repeat;