background-origin

設定元素背景圖片的原始起始位置。
語法：

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

引數分別表示背景圖片是從邊框，還是內邊距（預設值），或者是內容區域開始顯示。
效果如下：

需要注意的是，如果背景不是no-repeat，這個屬性無效，它會從邊框開始顯示。

background-clip

用來將背景圖片做適當的裁剪以適應實際需要。
語法：

background-clip ： border-box | padding-box | content-box | no-clip
 

引數分別表示從邊框、或內填充，或者內容區域向外裁剪背景。no-clip表示不裁切，和引數border-box顯示同樣的效果。backgroud-clip預設值為border-box。
效果如下圖所示：

background-size

設定背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。
語法：

background-size: auto | <長度值> | <百分比> | cover | contain

取值說明：
1、auto：預設值，不改變背景圖片的原始高度和寬度；
2、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設定為前面兩個值，當設定一個值時，將其作為圖片寬度值來等比縮放；
3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設定為所在元素寬高乘以前面百分比得出的數值，當設定一個值時同上；
4、cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個容器；
5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。

multiple backgrounds

多重背景，也就是CSS2裡background的屬性外加origin、clip和size組成的新background的多次疊加，縮寫時為用逗號隔開的每組值；用分解寫法時，如果有多個背景圖片，而其他屬性只有一個（例如background-repeat只有一個），表明所有背景圖片應用該屬性值。
語法縮寫如下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
可以把上面的縮寫拆解成以下形式：
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;
注意：

1. 用逗號隔開每組 background 的縮寫值；
2. 如果有 size 值，需要緊跟 position 並且用 "/" 隔開；
3. 如果有多個背景圖片，而其他屬性只有一個（例如 background-repeat 只有一個），表明所有背景圖片應用該屬性值。
4. background-color 只能設定一個。