研究了background相關的屬性，雖然很簡單，但有些還是不知道，整理出來系統的學習一下，也會更好的掌握這些知識點（細節決定成敗，哈哈）

background相關的屬性有（把比較常用的放在前面不做過多的解釋）：background、background-color、background-image、background-repeat、background-attachment、background-origin、background-blend-mode、background-clip、background-position、background-size、background-position-x、background-position-y

background 簡寫屬性在一個宣告中設定所有的背景屬性。所有瀏覽器都支援該屬性

可以設定的值有：

• background-color：設定元素的背景顏色
• background-position：設定背景影象的起始位置
• background-size：設定背景影象的尺寸
• background-repeat：設定是否及如何重複背景影象
• background-origin：background-position 屬性相對於什麼位置來定位。
• background-clip：規定背景的繪製區域
• background-attachment：設定背景影象是否固定或者隨著頁面的其餘部分滾動
• background-image：為元素設定背景影象
• background-blend-mode
• background-position-x、background-position-y

如果不設定其中的某個值，也不會出問題，順序也無所謂先後。通常建議使用這個屬性，而不是分別使用單個屬性，因為這個屬性在較老的瀏覽器中能夠得到更好的支援，而且需要鍵入的字母也更少。（IE8 以及更早的瀏覽器不支援一個元素多個背景影象。IE7 以及更早的瀏覽器不支援 "inherit"。IE8 需要 !DOCTYPE。IE9 支援 "inherit"。），看個線上的例子：試一試

background-color和background-image，就不在這裡詳細的說了，畢竟經常用，都知道吧（注意:background-color沒有inherit值）

可以設定多張圖片作為背景（IE8 以及更早的瀏覽器不支援一個元素多個背景影象。）

body
{ 
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

background-repeat：repeat（預設值）|repeat-y|repeat-x|no-repeat|inherit（IE不支援該值）（所有瀏覽器都支援該屬性）

background-position:0% 0%（預設值）【兩個值，可以是方向（left、top、bottom、center、right）的設定，也可以是百分比的形式，還可以是畫素大小的設定，如果只設置一個值，那麼第二個預設為center（50%）】，例：left top|top（類似於top center）|20% 20%|40px 40px|40px（類似於40px  50%）。也可以是inherit（但IE不支援該值）

嗯、主要講講下面的

background-size

background-size:length|percentage|cover|contain;

• length：設定背景影象的高度和寬度。第一個值設定寬度，第二個值設定高度。如果只設置一個值，則第二個值會被設定為 "auto"。
• percentage：以父元素的百分比來設定背景影象的寬度和高度。第一個值設定寬度，第二個值設定高度。如果只設置一個值，則第二個值會被設定為 "auto"。
• cover：把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域。背景影象的某些部分也許無法顯示在背景定位區域中。
• contain：把影象影象擴充套件至最大尺寸，以使其寬度和高度完全適應內容區域。

background-size:80px 60px;
background-size:80% 60%;
background-size:cover;
background-size:contain;

div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}

相容性：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支援 background-size 屬性。

background-origin:

規定 background-position 屬性相對於什麼位置來定位。注意：如果背景影象的 background-attachment 屬性為 "fixed"，則該屬性沒有效果。

background-origin: padding-box|border-box|content-box;

1. padding-box:背景影象相對於內邊距框來定位
2. border-box：背景影象相對於邊框盒來定位
3. content-box：背景影象相對於內容框來定位

background-clip:padding-box|border-box|content-box;相容性：IE9+、Firefox、Opera、Chrome 以及 Safari 支援 background-clip 屬性。下面的不常用，但還是蠻有意思的

background-blend-mode :

background-blend-mode :blend，混合的意思嘍，我的理解就是把兩種（及以上）的背景進行混合

可以是兩個影象背景，也可以是一個顏色和一個影象的背景（但我們知道顏色最多隻能有一個了），看下面的寫法

 background:url("../img/img2.jpg"),url("../img/img.jpg") ; background-blend-mode: exclusion  ; }

background:url("../img/img2.jpg"),#ef3239 ; background-blend-mode: exclusion  ; }

混合模式應該按background-image CSS屬性同樣的順序定義。如果混合模式數量與背景影象的數量不相等，它會被擷取至相等的數量。

background-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light 
| soft-light | difference | exclusion | hue | saturation | color | luminosity