（一）.background-origin:設(shè)置元素背景圖片的原始起始位置

語法：

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

參數(shù)分別表示背景圖片是從邊框，還是內(nèi)邊距（默認(rèn)值）,或者是內(nèi)容區(qū)域開始寫顯示。

效果如下：

效果圖

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

(二).background-clip:用來將背景圖片做適當(dāng)?shù)?b>裁剪以適應(yīng)實(shí)際需要。

語法：

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

參數(shù)分別表示從邊框、或內(nèi)填充，或者內(nèi)容區(qū)域向外裁剪背景。no-clip表示不裁切，和參數(shù)border-box顯示同樣的效果。background-clip默認(rèn)值為border-box。

效果如下：

效果圖

3.background-size:設(shè)置背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖片進(jìn)行伸縮。

語法：

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

取值說明：

1.auto:默認(rèn)值，不改變背景圖片的原始高度和寬度；

2.<長度值>：成對出現(xiàn)如200px 50px,將背景圖片寬高依次設(shè)置為前面兩個值，當(dāng)設(shè)置一個值時，將其作為圖片寬度值只來等比縮放；

3.<百分比>：0%~100%之間的任何值，將背景圖片寬高依次設(shè)置為元素寬高乘以前面百分比得出的數(shù)值，當(dāng)設(shè)置一個值時同上；

4.cover:顧名思義為覆蓋，即將背景圖片等比例縮放以填滿整個容器；

5.contain:容納，即將圖片等比縮放至某一邊緊貼容器邊緣為止。

（三）.multiple backgrounds:多重背景，也就是CSS2里background的屬性外加origin、clip和size組成的新background的多次疊加，縮寫時為用逗號隔開的每組值；用分解寫法時，如果有多個背景圖片，而其他屬性只有一個（例如background-repeat只有一個），表明所有背景圖片應(yīng)用該屬性值。

語法縮寫如下：

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 只有一個），表明所有背景圖片應(yīng)用該屬性值。

4.background-color 只能設(shè)置一個。