CSS3 -- 多背景（backgrounds）

一、CSS3 -- 多背景 描述

　　CSS3的多背景，主要做用是給同一個元素設置多個背景圖像，（即 在同一元素上能夠設置除background-color外多個background的其它屬性，由於一個元素只具有一個背景色）---（CSS3中，能夠讓同一個元素同時具備多個背景圖像，並能夠給多個背景圖像設置相同或不相同的background-(position||repeat||clip||size||origin||attachment)。

　　CSS2中的Background屬性：

合寫：
background: background-color || background-image || background-repeat || background-attachment || background-position;
分解寫：
　　background-color: color值 || RGBA值；
　　background-image: url();
　　background-repeat: repeat || repeat-x || repeat-y || no-repeat;
　　background-attachment: scroll || fixed;
　　background-position: <length> || <per>

　　CSS3中的Background屬性

合寫： 
background: background-image || background-position/background-size || background-repeat || background-attachment || background-clip || background-origin || background-color
分解寫：
   background-image: url();
   background-position: <length> || <per>
   background-size: <length> || <per>
   background-repeat: repeat || repeat-x || repeat-y || no-repeat;
   background-attachment: scroll || fixed;
   background-clip: padding-box || border-box || content-box;
   background-origin: padding-box || border-box || content-box;
   background-color: color值 || RGBA值；

提示：
　　CSS3中合寫時，background-size需跟在background-position的後面，並用「/」隔着，即"background-position/background-size"。
　　推薦CSS3中的Background屬性不要合寫，需加前綴。

 

二、CSS3 -- 多背景 兼容

三、CSS3 -- 多背景 用法

　　多背景：

　　　　background-image須要多個，但多個圖片之間使用逗號隔開,而其餘屬性能夠選擇一個或多個，若是有多個背景圖片時，其餘屬性只有一個時，那麼表示全部背景圖片應用了相同的屬性設置，但background-color只能設置一個，若是你設置多少background-color將是一種錯誤的語法設置。

　　　　CSS3多背景在各支持的瀏覽器下都是統一寫法，不須要加上本身的前綴。

background ： [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],*
  分解寫：
  　　background-image: url1,url2,...,urlN;
  　　background-repeat: repeat1,repeat2,...,repeatN;
 　　 background-position: position1,position2,...,positionN;
  　　background-size: size1,size2,...,sizeN;
  　　backrgound-attachment: attachment1,attachment2,...,attachmentN;
  　　background-clip: clip1,clip2,...,clipN;
  　　background-origin: origin1,origin2,...,originN;
  　　background-color: color;

　　

　　注意：多背景時，它的背景圖片導入是有前後順序的，越後面導入的背景圖片越在下面。--- （多背景圖片的顯示順序是跟其加載的前後順序有關，並不跟定位的前後有關）

 

四、CSS3 -- 多背景 實例： 更多實例  http://www.w3cplus.com/content/css3-multiple-backgrounds

 

整理自：（W3CPlus）CSS3 多背景