（一）寫在前面：
　　　▋舊有背景屬性：
　　　背景的顏色、圖片、重複、固定和方位現在大多有支援。
　　　至於透明化的部份要IE 9 ↥。
　　　▋新的背景屬性：
　　　圖片大小、定位、裁切要IE 9 ↥、Chrome 5 ↥、FireFox 3.63 ↥、Opera 10 ↥ 、 Safari 4 ↥


（二）實作範例：一樣只寫一種，瀏覽器看不到請添加另兩種語法，用-moz-跟-webkit-前綴
　➭background-color（純色背景）

background-color: 色碼 ;

色碼可以有很多種表示：
RGB寫法：^EX #867853。
英文寫法：^EX red、blue。

透明純色背景：
background-color:
rgba(red, green, blue ,alpha);
前三色參數值是設0-255，跟調色盤一樣，
alpha是透明度，從0至1＝填滿(0%-100%)

　➭background-image（背景圖片）

background-image: url(圖片位址) ;

透明背景圖片：
background-image:
url(圖片位址); opacity:0.6);

opacity可透明化圖片和背景色塊，設法亦0至1

　　❆  三種透明化的數值均是自0.0-1.0，不過Opacity會讓元素及被包覆的元素均透明化。
　　　除了用rgba，透明色還能用hsla設定，俺完全沒在用這個，需要的人請自行參考：
　　　半透明與透明效果設計 - CSS rgba, hsla 色彩單位 (CSS color units) [2*]　By 不惑仔 - from 網頁藝術思考

　➭background-repeat
　　有四種參數：
　　① 重複：background-repeat: repeat;
　　② 不重複：background-repeat: no-repeat;
　　③ 水平重複：background-repeat: repeat-x;
　　④ 垂直重複：background-repeat: repeat-y;
　　可與背景寫成一行：^Ex background: url(圖片) no-repeat;

　➭background-attachment
　　有兩種參數：
　　① 隨畫面捲動：background-attachment: scroll;  //預設值，不用特別設定。
　　② 圖不動如山：background-attachment: fixed;   //視窗所有內容跟著捲，就背景不會跟著捲動。

　➭background-position
　　有兩個參數：background-position: X Y ;
　　設定背景圖片在水平方向(X) 和垂直方向(Y) 的位置。

① X： 　　　　1.靠左中右對齊：left／center／right 　　　　2.橫向出現在特定像素處：N px, 　　　　3.位置訂於橫軸特定比例：(0-100)%

② Y： 　　　　1.靠上中下對齊：top／center／bottom 　　　　2.縱向位置定在特定像素：N px, 　　　　3.位置訂於縱軸特定比例：(0-100)%

　　以下列出背景位置和重複屬性結合產生的六種類型：

background-position: 5px 5px no-repeat;

background-position:80% 50% no-repeat;

background-position: 5px 5px repeat-x;

background-position:80% 50% repeat-y;

background-position: 5px 5px;

background-position:80% 50%;

✁ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

（三）新款背景設定：限制請見文頭。
　➭background-size
　　這個新屬性對我來說真的是一大福音，不用改變區塊大小就能直接改背景大小，真棒。
　　背景大小針對設定參數多寡我分成兩種寫法：
　　①設定兩參數：background-size: width height ; 可用 Npx 或 N%設定。
　　②設定一參數：background-size: size ; 可用 ^1.auto, ^2.cover, ^3.contain。

　　　▋參數說明：

　　　　1. auto：顯示背景原始長寬
　　　　2. cover：當背景小於區塊，使背景不重複的填滿區塊
　　　　3. contain：當背景大於區塊，使背景圖縮小符合區塊大小
　　　　❆ 長跟寬只設一個的話，表示另一者是auto。

　➭background-clip
　　設定裁切範圍，控制背景顯示大小，可做出文字遮罩的效果。
　　有三種作法：
　　①初始設定值：background-clip: border-box ; 預設值，有沒有加這行都不影響。
　　②從內距裁切：background-clip: padding-box ; 裁切掉內距以外的背景圖跟背景色。
　　③從內容裁切：background-clip: content-box ; 裁切掉內容以外的背景圖跟背景色。

包含文字遮罩共四種實作效果如下：
❆ Border(邊框) 跟Padding(內距) 都會增加區塊大小，為了避免版面跳掉，此區實作的區塊大小設法不同於上述案例350 ✖ 200(原始180+上內距20)，最終範圍依然是350×200，只是長寬加成改變。
　　寬度：內容寬度280px + 左右內距共60(30×2) + 左右邊框10(5*2) = 350px
　　高度：內容高度130px + 上下內距共60(30×2) + 上下邊框10(5*2) = 200px
　　設定：width:280px; height:130px; padding:30px; border:5px dotted #61c1ba;
　　　　　background:#ff0000 url(圖片) no-repeat;

background-clip: border-box;

background-clip: content-box;
只留內容寬高，內距跟邊框都裁切。

background-clip: padding-box;
裁掉邊框，保留了padding(內距)

遮罩

　　遮罩的關鍵語法：① -webkit-background-clip: text; ② -webkit-text-fill-color: transparent;
　　【註】遮罩可見-webkit-background-clip:text CSS effect By Jintos - from Codepen
　　【註】裁切可見【CSS新手筆記】Box-Sizing By Jeffrey - from 黑暗執行緒
　　　　　作者在前兩者的區別說明得很清楚

　➭background-origin
　　參數和裁切一樣，有三種。
　　①背景左上角定位在邊框的邊緣線：background-origin: border-box ; 預設值。
　　②背景左上角定位在內距的邊緣線：background-origin: padding-box ;
　　③背景左上角定位在內容的邊緣線：background-origin: content-box ;

background-origin:
border-box ;

background-origin:
padding-box ; 

background-origin:
content-box  ;

　　【註】以上三種新屬性可見CSS 3背景新屬性 By 凱帕 - from KIP網頁設計，實例效果很清楚