就是減少http請求次數，節省時間和帶寬。
2、background-position參數分析
background-position：x y;一般來說是水平位移和垂直位移。通過%或者像素來定位圖片。
3、如何定位？
一般來說：用圖片作爲背景的時候，css要這樣寫，以div容器舉例子，也可以是body、td、p等的背景，道理一樣。
div{ background:#FFF url(image) no-repeat fixed x y;}
這裏的background的屬性值依次爲：
#FFF 背景色：（顏色值，背景圖片沒有覆蓋的地方，或者沒有背景圖片時表現的背景色）
image 背景圖片：（這裏是圖片的地址）
no-repeat 是否重複：（圖片小於容器的大小時，默認會重複排列圖片以填滿容器，no-repeat表示不重複，只有這個時候後面的定位座標纔有用。）
fixed 背景是否隨容器滾動：（有兩個可選值，scroll滾動，fixed不滾動，默認是scroll）
x y 背景圖像的定位：（只有在no-repeat下定位纔有意義）
背景圖像定位中我們要明確的幾點：
1、x、y分別代表x軸和y軸。如果只有一個值，那默認的就是x軸方向，這時y軸方向就默認的是上下居中對齊，也就是center。
2、座標軸的原點就是對應容器的左頂點（這裏就是目前多要定位的上一級元素，記爲其父節點元素）。
3、這個座標的y軸箭頭朝下，也就是右下方（容器內部）x y的值才都爲正。
4、x y值分別表示背景圖片的左頂點相對於座標原點（也就是容器的左頂點）的值。
5、x y的值可以用百分比或者px來表示。
6、x y也可以用“left、right、top、bottom、center”這五個對齊方式來表示，但注意：用“left、right、top、bottom、center”來表示的時候，應用的是對齊規則，而不是座標規則。x爲left是表示圖片的左邊和容器的左邊對齊，爲right的時候表示圖片的右邊和容器的右邊對其，y爲top的時候表示圖片的頂部和容器的頂部對齊，爲bottom時表示圖片的底部和容器的底部對齊，x y等於center的時候表示居中對齊。
7、x y用百分比或者px表示的時候，其值可以爲負數。我們應用座標規則就很容易理解負數表示的意義，x爲負數時候表示圖片左頂點在容器左頂點的左側，y爲負數時表示圖片的左頂點在容器的左定點的上方。也就是向左和向上超出容器的範圍。
8、一般來說，圖片在容器裏的超出部分會自動隱藏。
圖片列子：
4、定位特例說明
1.background-position:50% 50%;[這裏的百分比是：（容器(container)的寬度—背景圖片的寬度）*left百分比 這裏必須要注意下！！！！！]
等同於left：{容器(container)的寬度—背景圖片的寬度}*left百分比，超出的部分隱藏。
等同於right：{容器(container)的高度—背景圖片的高度}*right百分比，超出的部分隱藏。
例如：background-position:50% 50%;就是background-position:(1000-2000)*50%px, (500-30)*50%px;即background-position:-500px,235px;也就是背景圖片從容器(container)的左上角向左移500px，向下移235px；
5、具體的定位實現
圖片：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖片定位</title>
<style type="text/css">
.icon {
background:url(../images/icon.png) no-repeat
}
.demo1{
width:19px;
height:22px;
overflow:hidden;
background-position:-102px -351px;
display:block;
margin:50px auto;
}
.demo2{
width:22px;
height:24px;
overflow:hidden;
background-position:-3px -2px;
display:block;
margin:50px auto;
}
.demo3{
width:20px;
height:26px;
overflow:hidden;
background-position:-3px -56px;
display:block;
margin:50px auto;
}
.demo4{
width:24px;
height:24px;
overflow:hidden;
background-position:-3px -110px;
display:block;
margin:50px auto;
}
.demo5{
width:24px;
height:24px;
overflow:hidden;
background-position:-3px -160px;
display:block;
margin:50px auto;
}
</style>
</head>
<body>
<div class="icon demo1"></div>
<div class="icon demo2"></div>
<div class="icon demo3"></div>
<div class="icon demo4"></div>
<div class="icon demo5"></div>
</body>
</html>