background：背景。在css里面作為css屬性一成員，通過該屬性可設(shè)置背景圖片、背景顏色、背景圖片截取等樣式。而僅僅一個(gè)background又具有多個(gè)子屬性。
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background-size（CSS3新增）
- background-origin（CSS3新增）
- background-clip（CSS3新增）
background 簡(jiǎn)寫屬性可以在一個(gè)聲明中設(shè)置以上的多個(gè)的背景屬性。
常用寫法：background:背景顏色 背景圖片 背景平鋪 背景滾動(dòng) 背景位置
當(dāng)然了，如果不設(shè)置其中的某個(gè)值，也不會(huì)出問題，比如 background:#ff0000 url('a.png'); 也是允許的。
下面就來將這7個(gè)子屬性詳細(xì)的介紹一下。
1. background-color
顏色名稱，如：background-color:red;
十六進(jìn)制背景色，如：background-color:#f00;;
rgb顏色，這里如果是rgba，a表示透明程度，為0全透明，為1為完全不透明，
如：background-color:rgb(255,0,0.3);;
特殊值：transparent，透明色：background-color:transparent;
2. background-image
background-image屬性用于為一個(gè)元素設(shè)置一個(gè)或多個(gè)背景圖片，多個(gè)背景圖片之間以逗號(hào)隔開。
一張圖片：background-image: url(img/a.jpg);
多張圖片：background-image: url(img/a.jpg),url(img/b.jpg);
特殊值：none，不顯示背景圖像
background-image: none;
3. background-repeat
background-repeat屬性定義背景圖像的重復(fù)方式。背景圖像可以沿著水平軸，垂直軸，兩個(gè)軸重復(fù)，或者根本不重復(fù)。
常用的4個(gè)值：
repeat：水平和垂直方向都重復(fù)圖像，background-repeat: repeat;
repeat-x：水平方向重復(fù)圖像
repeat-y：垂直方向重復(fù)圖像
no-repeat：圖像不重復(fù)
4. background-attachment
規(guī)定背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。
scroll：背景圖像相對(duì)于頁面不動(dòng)，會(huì)隨著網(wǎng)頁的滾動(dòng)而移動(dòng)，默認(rèn)
fixed：背景圖像相對(duì)于瀏覽器窗口不動(dòng)，內(nèi)容滾動(dòng)的時(shí)候背景圖像不動(dòng)
background-attachment: fixed;
5. background-position
第一個(gè)值為橫坐標(biāo)，第二個(gè)值為縱坐標(biāo)。默認(rèn)值為：(0% 0%)。
如果只指定了一個(gè)值，該值將用于橫坐標(biāo)。縱坐標(biāo)將默認(rèn)為50%。
例如：background-position: right；代表背景圖右側(cè)，垂直方向居中的位置。
百分比位置，如：background-position: 20% 20%;
具體像素位置， 如：background-position: 20px 20px;
6.background-size
background-size 設(shè)置背景圖片大小。圖片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同時(shí)縮放到元素的可用空間的尺寸。
語法
單張圖片的背景大小可以使用以下三種方法中的一種來規(guī)定：
- 使用關(guān)鍵詞
[contain] - 使用關(guān)鍵詞
[cover] - 設(shè)定寬度和高度值
當(dāng)通過寬度和高度值來設(shè)定尺寸時(shí)，你可以提供一或者兩個(gè)數(shù)值:
- 如果僅有一個(gè)數(shù)值被給定，這個(gè)數(shù)值將作為寬度值大小，高度值將被設(shè)定為
[auto] - 如果有兩個(gè)數(shù)值被給定，第一個(gè)將作為寬度值大小，第二個(gè)作為高度值大小。
每個(gè)值可以是<length>, 是 <percentage>, 或者 [auto]。
示例：
background-size: contain;
background-size: 50%;
background-size: 3em;
background-size: auto 1em;
background-size: 50% 25%;
為了設(shè)定超過一張以上的圖片尺寸時(shí)，需要提供多項(xiàng)數(shù)值，它們通過逗號(hào)分隔。
background-size: 50% 25%, contain, 3em;
屬性值
<div id="box"></div>
CSS部分 背景圖片分辨率為427*640
#box {
background-image: url(/media/examples/hand.jpg);
width: 100%;
height: 100%;
}
分別給box的background-size屬性添加不同的屬性值，會(huì)產(chǎn)生不同的效果。
1、長(zhǎng)度：可以用px、em、rem等指定背景圖片大小，不能為負(fù)值。
2、百分比：指定背景圖片相對(duì)背景區(qū)（參照盒子的寬高）的百分比。背景區(qū)由[
background-origin] 設(shè)置，默認(rèn)為盒模型的內(nèi)容區(qū)與內(nèi)邊距，也可設(shè)置為只有內(nèi)容區(qū)，或者還包括邊框。如果[attachment]為fixed，背景區(qū)為瀏覽器可視區(qū)（即視口），不包括滾動(dòng)條。不能為負(fù)值。
3、auto
以背景圖片的比例縮放背景圖片。
4、cover
設(shè)置為cover時(shí)，會(huì)自動(dòng)調(diào)整縮放比例，保證圖片始終填充滿背景區(qū)域，如有溢出部分則會(huì)被隱藏。
5、contain
設(shè)置為contain，會(huì)自動(dòng)調(diào)整縮放比例，保證圖片始終完整顯示在背景區(qū)域。背景區(qū)可能出現(xiàn)部分空白。當(dāng)背景圖和容器的大小的不同時(shí)，容器的空白區(qū)域會(huì)顯示由 background-color 設(shè)置的背景顏色。
例如：第二張圖所示當(dāng)背景顏色設(shè)置為黃色時(shí)，且圖片不平鋪時(shí)，空白區(qū)域會(huì)顯示為黃色。
注：圖像剛好完全顯示，一般不能覆蓋全部背景區(qū)。
7.background-clip
background-clip 裁剪，通常和background-origin一起使用，決定設(shè)置元素的背景（背景圖片或顏色）是否顯示。
注：background-clip只是將背景和背景色粗暴的裁剪。
該屬性有四個(gè)值
border-box
背景延伸至邊框外沿（但是在邊框下層）。background-origin: border-box;
padding-box
背景延伸至內(nèi)邊距(padding）外沿。不會(huì)繪制到邊框處。
content-box
背景被裁剪至內(nèi)容區(qū)（content box）外沿。
text
背景被裁剪成文字的前景色。
這個(gè)屬性只有在邊框
border被設(shè)置為非固實(shí)（soild）、透明或半透明時(shí)才能看到視覺效果，否則，本屬性產(chǎn)生的樣式變化會(huì)被邊框覆蓋。
8.background-origin
background-origin 規(guī)定了指定背景圖片[background-image] 屬性的原點(diǎn)位置的背景相對(duì)區(qū)域.
border-box
背景圖片的擺放以border區(qū)域?yàn)閰⒖?br>
padding-box
背景圖片的擺放以padding區(qū)域?yàn)閰⒖?br>
content-box
背景圖片的擺放以content區(qū)域?yàn)閰⒖?/p>
background-origin與background-clip的區(qū)別
樣式：
先看一下background-origin屬性。
.bg{
width: 100px;
height: 100px;
padding:50px;
border: 10px dashed #000000;
background: #ffff00 url('pic1.gif') no-repeat;
margin-top: 10px;
display: inline-block;
}
.bg_origin_border{
background-origin: border-box;
}
.bg_origin_padding{
background-origin: padding-box;
}
.bg_origin_content{
background-origin: content-box;
}
先看一下background-clip屬性。
.bg_clip_border{
background-clip: border-box;
}
.bg_clip_content{
background-clip: content-box;
}
.bg_clip_padding{
background-clip: padding-box;
}
這就印證了background-clip只是將背景和背景色粗暴的裁剪。
好的，以上就是我對(duì)background的各個(gè)屬性的理解，實(shí)際應(yīng)用時(shí)可能會(huì)有部分出入，我們只需要掌握background-color、background-image、background-repeat、background-position、background-size這幾個(gè)常用的屬性即可。
歡迎大家一起交流，討論。
