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的使用，感興趣的朋友可以觀注本站有關這方面的最新更新。

如需轉載煩請註明出處：W3CPLUS