background 是 css中的核心屬性，我們對他應該充分了解。
background-image 定義背景圖像 這個屬性是我們用的最多的屬性
設置背景圖像有兩個方式
background: url("img/01.jpg") ; 或者 background-image: url("img/01.jpg");
background-color 定義背景顏色 (三個屬性）
屬性為元素設置一種純色。這種顏色會填充元素的內容、內邊距和邊框區域，擴展到元素邊框的外邊界（但不包括外邊距）。如果邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。
1.currentColor顧名思意就是“當前顏色”，准確講應該是“當前的文字顏色”，這是css3中新加的關鍵字 比如 ：border: 1px solid currentColor 是指當前標簽所繼承文字的顏色
http://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/ 這個是currentColor 的具體描述 。
2. transparent 盡管在大多數情況下，沒有必要使用 transparent。不過如果您不希望某元素擁有背景色，同時又不希望用戶對瀏覽器的顏色設置影響到您的設計，那么設置 transparent 值還是有必要的。
3. inherit是繼承,繼承塊中的顏色 （這個具體的用法我也不清楚，基本上沒有用過。）
background-origin 指定背景的顯示區域
該屬性指定了背景從哪個區域(邊框、補白或內容)開始繪制,但也僅僅能控制背景開始繪制的位置，你可以用這個屬性在邊框上繪制背景，
1. padding-box 背景圖像相對於內邊距框來定位。
.box {
width: 300px;
height: 400px;
background: url("im/1.jpg") no-repeat;
background-origin: border-box;
padding: 50px;
border: 50px solid orange;
margin: auto;
margin-top: 100px;
}
2. border－box 背景圖相對於邊框盒來定位。
.box {
width: 300px;
height: 400px;
background: url("im/1.jpg") no-repeat;
background-origin: border-box;
padding: 50px;
border: 50px solid orange;
margin: auto;
margin-top: 100px;
}
3. content－box 背景圖像相對於內容框來定位。
.box {
width: 300px;
height: 400px;
background: url("im/1.jpg") no-repeat;
background-origin: content-box;
padding: 50px;
border: 50px solid orange;
margin: auto;
margin-top: 100px;
}
background-clip 指定背景的裁剪區域
該屬性指定了背景在哪些區域可以顯示，但與背景開始繪制的位置無關，背景的繪制的位置可以出現在不顯示背景的區域，這時就相當於背景圖片被不顯示背景的區域裁剪了一部分一樣。
如果它的值為border,則背景在元素的邊框、補白和內容區域都會顯示；如果值為padding,則背景只會在補白和內容區域顯示；如果值為content，則背景只會在內容區域顯示。
1.padding-box 從padding區域向外剪裁背景
.box {
width: 300px;
height: 300px;
background: url("im/1.jpg") no-repeat;
background-clip: padding-box;
background-origin: padding-box;
padding: 50px;
border: 50px dashed orange;
margin: auto;
margin-top: 100px;
}
2.border-box 從border區域向外剪裁背景
.box {
width: 300px;
height: 300px;
background: url("im/1.jpg") no-repeat;
background-clip: border-box;;
background-origin: padding-box;
padding: 50px;
border: 50px dashed orange;
margin: auto;
margin-top: 100px;
}
3.content-box 從content區域向外剪裁背景
.box {
width: 300px;
height: 300px;
background: url("im/1.jpg") no-repeat;
background-clip: content-box;
background-origin: padding-box;
padding: 50px;
border: 50px dashed orange;
margin: auto;
margin-top: 100px;
}
background-repeat 設置背景圖片是否及其如何重復鋪排
1. repeat: 平鋪整個頁面,左右與上下
.box {
width: 600px;
height: 600px;
background: url("im/1.jpg");
background-repeat:repeat;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}
2. repeat-x: 在x軸上平鋪,左右
.box {
width: 600px;
height: 600px;
background: url("im/1.jpg");
background-repeat:repeat-x;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}
3. repeat-y: 在y軸上平鋪,上下
.box {
width: 600px;
height: 600px;
background: url("im/1.jpg");
background-repeat:repeat-y;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}
4. no-repeat: 圖片不重復
.box {
width: 600px;
height: 600px;
background: url("im/1.jpg");
background-repeat:no-repeat;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}
background-size 定義背景圖片的大小
1. 初始值 auto
.box {
width: 600px;
height: 600px;
background: url("im/1.jpg")no-repeat;
background-size: auto;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}
2. cover 保持背景圖像本身的寬高比例，將圖片縮放到正好完全覆蓋所定義背景區域。
.box {
width: 600px;
height: 600px;
background: url("im/1.jpg")no-repeat;
background-size: cover;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}
3. contain 保持圖像 本身的寬高比例，將圖片縮放到寬度或高度正好適應所定義背景的區域。
.box {
width: 600px;
height: 600px;
background: url("im/1.jpg")no-repeat;
background-size:contain;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}
background-position 設置背景圖片的位置
1. 最主要使用在 一張png 上有多個logo 或者 ico 這個時候就用到background-position了
2. background-position: 15px 20px;(指將圖片向右移15px,向下移20px;) 就是以圖片的左上角頂點為原點，往下和右都為正，反之為負，
3. background-position : centen centen 靠右居中。
background-attachment 定義背景圖像的顯示方式
1. scroll: 隨着頁面的滾動軸背景圖片將移動
背景圖是相對於元素自身固定，內容動時背景圖也動,附加到元素的border
2. fixed: 隨着頁面的滾動軸背景圖片不會移動
背景圖片相對於視口固定，就算元素有了滾動條，背景圖也不隨內容移動。
3. local : 則背景會隨內容的滾動而滾動。
因為背景圖是相對於元素自身內容定位，開始固定，元素出現滾動條后背景圖隨內容而滾動。
div{
width: 200px;
height: 350px;
border: 1px solid red;
background-image: url("im/1.jpg");
background-repeat: no-repeat;
background-attachment: local;
overflow: scroll;
line-height: 1.5;
}
</style>
</head>
<body>
<div>
1內容超出會出現滾動條
2內容超出會出現滾動條
3內容超出會出現滾動條
4內容超出會出現滾動條
5內容超出會出現滾動條
6內容超出會出現滾動條
7內容超出會出現滾動條
8內容超出會出現滾動條
9內容超出會出現滾動條
10內容超出會出現滾動條
11內容超出會出現滾動條
12內容超出會出現滾動條
13內容超出會出現滾動條
14內容超出會出現滾動條
15內容超出會出現滾動條
16內容超出會出現滾動條
17內容超出會出現滾動條
18內容超出會出現滾動條
19內容超出會出現滾動條
20內容超出會出現滾動條
</div>
</body>
