Background大家一定不會陌生，但是ＣＳＳ3開始，給這個Background屬性增加了幾個新的屬性值 ：Background-size,Background-clip和Background-origin。那麼從今天開始分幾節內容分別來介紹一下background-size,background-clip,background-origin等新屬性。今天的主題是Background-size，在開始介紹Backgrond-size之前，大家一起來回憶一下CSS2中Background中帶有的一些屬性：
background: [<background-color>][,<background-image>][,<background-repeat>][,<background-attachment>][,<background-position>]
background我們可以把其屬性值串寫在一起，同時也可以一個一個分寫出來，下面簡簡單重溫一下各屬性的取值情況：
一、設置背景色：background-color
background-color: transparent || <color>
background-color其主要用來設置元素的背景顏色，其默認值爲transparent（不設置任何顏色-情況下是透明 色），<color>用來設置背景色彩，常用的顏色格式爲：顏色名：如“red”；rgb色:如rgb(255, 0, 0)或rgb(100%, 0%, 0%)；hls值hsl(0, 100%, 50%)，二進制值 #FF0000。在支持CSS3的瀏覽器中還可以使用rgba值rgba(255,0,0,1)。
二、設置背景圖片:background-image
background-image: none || <url>
background-image其主要用來設置元素的背景圖片，默認值爲none，<url>是指背景圖片的地址，這個地址可以是相對地址，也可以是絕對地址。
三、設置背景圖片重複：禾王background-repeat
background-repeat: repeat || repeat-x || repeat-y || no-repeat
background-repeat是用來設置background-image在元素中的鋪放格式的，其默認爲repeat，也就是背景圖片沿元 素的X軸和Ｙ軸同時平鋪，另外幾個值分別表示repeat-x：背景圖片僅沿Ｘ軸水平平鋪，repeat-y背景圖片僅沿Ｙ軸平鋪，no-repeat表 示背景圖片不做任何鋪放格式設置。
四、設置背景圖像是否固定或者隨着頁面的其餘部分滾動:background-attachment
background-attachment: scroll || fixed
background-attachment主要是用來設置背景圖像是否固定或者隨着頁面的其餘部分滾動，，其默認值爲scroll，表示背景圖片會隨滾動條一起滾動，而取值fixed時，背景圖片固定不動。
五、設置背景圖片的位置background-position
background-position: <percentage> || <length> || [left|center|right][,top|center|bottom]
background-position主要是用爲設置背景圖片的位置，其默認值爲(0,0)||(0%,0%)||(left top),可以進行具體的百分數或數值設置，也可以使用left,center,top,right,top,bottom配合設置，而其中以下幾種表示 相同定位方式：
"top left","left top"和"0% 0%","0,0"代表元素的左上角；
"top","top center","center top"和"50% 0"表示在元素頂邊居中位置；
"right top","top right"和"100% 0"代元素的是元素的右上角位置；
"left","left center","center left"和"0% 50%"表示在元素左邊中間位置；
"center","center center"和"50% 50%"表示在元素中間位置；
"right","right center","center,right"和"100% 50%"表示在元素右邊中間位置；
"bottom left","left bottom"和"0% 100%"表示在元素的左下角；
"bottom","bottom center","center bottom"和"50% 100%"表示在元素的底下中間點位置；
"bottom right"，"right bottom"和“100％ 100％”表示在元素右下角位置
大家可以仔細對照下圖：
上面簡單的介紹了一下background的幾個常用屬性值的使用方法，那現在開始就進入到今天的主題：background-size。我們一起來學習background-size的屬性，別的先不說了，我們也先從其語法開始入手：
background-size: auto || <length> || <percentage> || cover || contain
取值說明：
1、auto:此值爲默認值，保持背景圖片的原始高度和寬度；
2、<length>此值設置具體的值，可以改變背景圖片的大小；
3、<percentage>此值爲百分值，可以是0％〜100％之間任何值，但此值只能應用在塊元素上，所設置百分值將使用背景圖片大小根據所在元素的寬度的百分比來計算。
4、cover：此值是將圖片放大，以適合鋪滿整個容器，這個主要運用在，當圖片小於容器時，又無法使用background-repeat來實現時，我們就可以採用cover;將背景圖片放大到適合容器的大小，但這種方法會使用背景圖片失真；
5、contain:此值剛好與cover相反，其主要是將背景圖片縮小，以適合鋪滿整個容器，這個主要運用在，當背景圖片大於元素容器時，而又需要將背景圖片全部顯示出來，此時我們就可以使用contain將圖片縮小到適合容器大小爲止，這種方法同樣會使用圖片失真。
當background-size取值爲<length>和<percentage>時可以設置兩個值，也可以設置一個值，當只取一個值時，第二個值相當於auto，但這裏的auto並不會使背景圖片的高度保持自己原始高度，而會與第一個值相同。
兼容的瀏覽器
background-size和其他的一些CSS3屬性一樣，需要加上自己的別名，
/*Ｍozilla*/
-moz-background-size: auto || <length> || <percentage> || cover || contain
/*Webkit*/
-webkit-background-size: auto || <length> || <percentage> || cover || contain
/*Presto*/
-o-background-size: auto || <length> || <percentage> || cover || contain
/*W3c標準*/
background-size: auto || <length> || <percentage> || cover || contain
上面主要針對性介紹了background-size的理論知識，下面我們分別來看看其在各種值怕顯示效果：
爲了說明效效果，先給出一個ＤＥＭＯ結構和一張背景圖：
HTML Code:
<div class="demo"></div>先初步爲其加上一些效果：
.demo {
background: url("../images/background-image.jpg") no-repeat;
width: 200px;
height: 100px;
line-height: 100px;
border: 1px solid #ccc;
font-size: 14px;
text-align: center;
}
隨便找張圖片(50px*50px)來當作背景圖片使用：
DEMO一、background-size:auto;
我來看第一個DEMO,在前面的DEMO上加上和個class名爲"backgroundSizeAuto",在這個Demo上我們應用上前面所示的背景，並把background-size取值爲auto,
.backgroundSizeAuto {
-moz-background-size: auto;
-webkit-background-size: auto;
-o-background-size: auto;
background-size: auto;
} 效果：
效果中明顯得知，這張背景圖完全沒有作出任何變化，前面也說過，auto值就是使用背景圖保持原樣，不做任何參數修改，這個效果就相當於沒加background-size效果一樣。
Demo二、background-size:<length>:
在這個DEMO中，給background-size一個具體的值，比如說這裏取值爲150px 80px;如：
.backgroundLength {
-moz-background-size: 150px 80px;
-webkit-background-size: 150px 80px;
-o-background-size: 150px 80px;
background-size: 150px 80px;
} 效果：
從效果圖中告訴我們，此時背景圖片由當時的50px*50px變成了150px*80px,此時背景圖片也變形失真了。上面是取值爲兩個值時，第一 個值重新變成了背景圖片的長度值，而第二個值也相應變成了背景圖片的高度值；但我們如果職取一個值時，那麼此時的值將同時定義給背景圖片的寬和高，相當於 background-size:150px auto.另一個其只能了兩個值，決不會有第三個值出現，如果有第三個值出現，你就用錯了，將無任何效果顯示。
DEMO三、background-size:<percentage>:
現在將ＤＥＭＯ的值設置成百分數，我這裏取了一個80% 50%:
.backgroundPer {
-moz-background-size:80% 50%;
-webkit-background-size:80% 50%;
-o-background-size:80% 50%;
background-size:80% 50%;
} 效果：
同樣效果告訴我們，圖片會改變大小，但這裏有一點需要特別注意，圖片大小不是按背景圖片大小的百分數來計算，而是裝截背景圖的元素百分比計算，就拿 我們這個DEMO來說，div.demo的大小是200px的寬100px的高，此時的背景圖片大小將根據div.demo的寬和高的百分比計算，這樣一 來，背景圖片的寬就是200px*80%等 於160px;而背景圖片的高同樣是100px*50%等於50px；如果有內邊距的話還需要加上padding的值一起計算。另外當其只取一個值時，那 麼寬度和高度將相同，相當於background-size: 80％ auto。
ＤＥＭＯ二和DEMO三分別是以固定值和百分比來改變background-image的尺寸，同進還可以兩種取值一起使用，如：
.backgroundLengthPre {
-moz-background-size: 150px 80%;
-webkit-background-size: 150px 80%;
-o-background-size: 150px 80%;
background-size: 150px 80%;
}
效果：
DEMO四、background-size: cover;
.backgroundCover {
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
} 效果：
效果圖再次證明前面所講的，background-size取值爲cover時，背景圖片自己會放大到適合容器的尺寸，在這裏我需提示的是，在ＩＥ中有一個濾鏡是類似於cover的功能，
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/background-image.jpg’, sizingMethod=’scale’);
-ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/background-image.jpg’, sizingMethod=’scale’)”;
如果使用濾鏡的話，background-size:cover；只有在IE6中不支持了。
DEMO五、background-size:contain;
ＤＥＭＯ三中的cover是把背景圖片放大到適合元素容器的尺寸，這時的contain剛好是跟cover相反，是把背景圖片縮小到適合元素容器的尺寸，如：
.backgroundSizeContain {
width: 30px;
height: 30px;
-moz-background-size: contain;
-webkit-background-size: contain;
-o-background-size: contain;
background-size: contain;
} 效果：
前面的DEMO中大家都知道，例子中使用的背景圖片是50px*50px;而現在將元素改成了30px*30px；效果中可以看到背景圖片此時的尺寸也相應的縮小適合了元素容器的尺寸。
從上面的幾個DEMO效果可以看出，只有當background-size值爲auto時，背景圖片纔不會變形失真，而其他值都會造成背景圖片變形夫真，所以大家使用時需要仔細考慮好，以免給你的製作帶來不良效果。
background-size的cover的使用可以讓我們解決在不同分辨大小的瀏覽器下使用一張背景圖片，他也常配合W3C CSS3 Media Queries Module一起使用，將達到你意想不到的效果，也就是所說的，一張背景圖在，不同分辨大小的瀏覽器下顯示滿屏，具體如何使用，大家先看一段下面的代碼：
/*這段代碼是當不支持CSS3 Media Queries瀏覽器按background-size:cover模式顯示背景圖片*/
body {
background: #000 url(myBackground_1280x960.jpg) center center fixed no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*1024px X 768px */
@media only all and (max-width: 1024px) and (max-height: 768px) {
body {
-moz-background-size: 1024px 768px;
-webkit-background-size: 1024px 768px;
-o-background-size: 1024px 768px;
background-size: 1024px 768px;
}
}
/*640px X 480px*/
@media only all and (max-width: 640px) and (max-height: 480px) {
body {
-moz-background-size: 640px 480px;
-webkit-background-size: 640px 480px;
-o-background-size: 640px 480px;
background-size: 640px 480px;
}
}
上例中後面兩段代碼分別實現了1024*768和640*480兩種分辨背景圖片顯示滿屏，加上最最前面那段代碼是當，瀏覽器不支持W3C CSS3 Media Queries Module時，背景圖將按cover縮放形式顯示。關於這方面更詳細的應用大家可以到alistapart.com和Soak Ｂlog查閱。
那麼到這裏零零亂亂的就給大家介紹完了background-size的使用，並通過幾個實例給大家展現了background-size在不同值的設置下所起的不同效果。希望能給大家在今後的應用中帶來一定的幫助，下一節將繼續介紹background在CSS3中新加的屬性background-clip的使用，感興趣的朋友可以觀注本站有關這方面的最新更新。