1、background-origin
設置元素背景圖片的原始起始位置。
語法：
background-origin ： border-box | padding-box | content-box;
參數分別表示背景圖片是從邊框，還是内邊距（默認值），或者是内容區域開始顯示。
需要注意的是，如果背景不是no-repeat，這個屬性無效，它會從邊框開始顯示。
2、background-clip
用來將背景圖片做適當的裁剪以適應實際需要。
語法：
background-clip ： border-box | padding-box | content-box | no-clip
參數分別表示從邊框、或内填充，或者内容區域向外裁剪背景。
no-clip表示不裁切，和參數border-box顯示同樣的效果。backgroud-clip默認值爲border-box。
效果如下圖所示：
<style type="tet/css">
.wrap{
width:220px;
border:20px dashed #000;
padding:20px;
font-weight:bold;
color:#000;
background:#ccc url(1.png)no-repaet;
background-origin:border-box;
background-clip:padding-box;
position:relative;
}
</style>
3、background-size
設置背景圖片的大小
以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。
語法：
background-size: auto | <長度值> | <百分比> | cover | contain
取值說明：
auto：默認值，不改變背景圖片的原始高度和寬度；
<長度值>：成對出現如200px 50px，將背景圖片寬高依次設置爲前面兩個值，當設置一個值時，將其作爲圖片寬度值來等比縮放；
<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設置爲所在元素寬高乘以前面百分比得出的數值，當設置一個值時同上；
cover：顧名思義爲覆蓋，即將背景圖片等比縮放以填滿整個容器；
contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣爲止。
<!DOCTPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>背景圖片大小</title>
<style type="text/css">
.demo{
background:url(#)no-repaet;
width:300px;
height:140px;
border:1px solid #999;
background-size:100%
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>4、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;
注意：
用逗號隔開每組 background 的縮寫值；
如果有 size 值，需要緊跟 position 並且用 "/" 隔開；
如果有多個背景圖片，而其他屬性只有一個（例如 background-repeat 只有一個），表明所有背景圖片應用該屬性值。
background-color 只能設置一個。
舉例：
有三張單獨的圖片：
使用多背景技術實現：
具體代碼實現，查看12-16行）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多重背景</title>
<style type="text/css">
.demo{
width: 300px;
height: 140px;
border: 1px solid #999;
background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;
margin:0 0 20px 0;
}
.task {
width: 300px;
height: 140px;
border: 1px solid #999;
background:url(1) no-repeat,
url(1.png) no-repeat;
background-position:left top,150px 60px;
}
</style>
</head>
<body>
<div class="demo"></div>
<div class="task"></div>
</body>
</html>
