Multiple background

語法:

取值:

[ background-image ]:
指定對象的背景圖像。可以是真實圖片路徑或使用漸變創建的“背景圖像”
[ background-repeat ]:
指定對象的背景圖像如何鋪排填充。
[ background-attachment ]:
指定對象的背景圖像是隨對象內容滾動還是固定的。
[ background-position ]:
指定對象的背景圖像位置。
[ background-origin ]:
指定對象的背景圖像顯示的原點。
[ background-clip ]:
指定對象的背景圖像向外裁剪的區域。
[ background-size ]:
指定對象的背景圖像的尺寸大小。

說明:

複合屬性。檢索或設置對象的多重背景圖像(背景色background-color不能設置多重)。
  • 一個元素可以設置多重背景圖像。
  • 每組屬性間使用逗號分隔。
  • 如果設置的多重背景圖之間存在著交集(即存在著重疊關系),前面的背景圖會覆蓋在後面的背景圖之上。
  • 示例:假設要在同一個元素上定義3個背景圖像

    縮寫方式:

    background:url(?/css3/properties/background/test1.jpg) no-repeat scroll 10px 20px,url(?/css3/properties/background/test2.jpg) no-repeat scroll 50px 60px,url(?/css3/properties/background/test3.jpg) no-repeat scroll 90px 100px;
    
    background-origin:content-box,content-box,content-box;
    
    background-clip:padding-box,padding-box,padding-box;
    
    background-size:50px 60px,50px 60px,50px 60px;

    拆分方式:

    background-image:url(?/css3/properties/background/test1.jpg),url(?/css3/properties/background/test2.jpg),url(?/css3/properties/background/test3.jpg);
    
    background-repeat:no-repeat,no-repeat,no-repeat;
    
    background-attachment:scroll,scroll,scroll;
    
    background-repeat:10px 20px,50px 60px,90px 100px;
    
    background-origin:content-box,content-box,content-box;
    
    background-clip:padding-box,padding-box,padding-box;
    
    background-size:50px 60px,50px 60px,50px 60px;
  • 如果定義了多個背景圖片,而其他屬性只有一個參數值,則表明所有背景圖片的該屬性都應用同一個參數值。據此可以對上面的例子進行縮寫:

    縮寫方式:

    background:url(?/css3/properties/background/test1.jpg) no-repeat scroll 10px 20px,url(?/css3/properties/background/test2.jpg) no-repeat scroll 50px 60px,url(?/css3/properties/background/test3.jpg) no-repeat scroll 90px 100px;
    
    background-origin:content-box;
    
    background-clip:padding-box;
    
    background-size:50px 60px;

    拆分方式:

    background-image:url(?/css3/properties/background/test1.jpg),url(?/css3/properties/background/test2.jpg),url(?/css3/properties/background/test3.jpg);
    
    background-repeat:no-repeat;
    
    background-attachment:scroll;
    
    background-repeat:10px 20px,50px 60px,90px 100px;
    
    background-origin:content-box;
    
    background-clip:padding-box;
    
    background-size:50px 60px;

兼容性:

  • 淺綠 = 支持
  • 紅色 = 不支持
  • 墨綠 = 部分支持
  • 橙色 = 实验性质
支持版本\類型 IE Firefox Safari Chrome Opera
版本 6.0-8.0 4.0 5.1 13.0 11.50
版本 9.0

示例: