background

語法:

background:[ <bg-layer>, ]* <final-bg-layer>

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || background-color

預設值看每個獨立屬性

適用於:所有元素

繼承性:無

動畫性:看每個獨立屬性

計算值:看每個獨立屬性

媒 體:視覺

取值:

background-image
指定元素使用的背景圖片。可以是圖片路徑或使用漸變建立的“背景圖片”
background-position
指定背景圖片在元素中出現的位置。
background-size
指定背景圖片尺寸。
background-repeat
指定背景圖片如何填充。
background-attachment
定義滾動時背景圖片相對於誰固定。
background-origin
指定背景圖片從元素的哪個區域作為顯示的原點。
background-clip
指定背景圖片向外裁剪的區域。
background-color
指定背景顏色。

說明:

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

    縮寫方式:

    background: url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box,
    	   url(test2.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,
    	   url(test3.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;

    注意,因為background-color不能設定多組,且前面的背景會疊在之後的背景之上,所以背景色通常都定義在最後一組上,避免背景色將圖片蓋住。

    拆分方式:

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

    縮寫方式:

    background-image: url(test1.jpg), url(test2.jpg), url(test3.jpg);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 10px 20px;
    background-size: 50px 60px,70px 90px,110px 130px;
    background-origin: content-box;
    background-clip: padding-box;
    background-color: #aaa;
  • 如果定義了多個背景圖片,而background-originbackground-clip設定了相同的值。可這樣縮寫:

    縮寫方式:

    background: url(test1.jpg) no-repeat scroll 10px 20px/50px 60px padding-box,
    	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px padding-box,
    	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px padding-box #aaa;

    這表示background-originbackground-clip都使用了padding-box參數值。

  • 對應的腳本特性為:background

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
Multiple backgrounds 8.0 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
9.0+

示例: