在網頁開發中我們經常需要對圖檔進行分割（如下圖）來使用，而不是分别提供單獨的圖檔來調用，常見的如頁面背景，按鈕圖示等，這樣做的好處就是減少請求次數，節省時間和帶寬。
對背景圖檔的定位就需要用到CSS中的background樣式，如：
屬性解釋：
background-image : none | url ( url )
none
:
預設值。無背景圖
url ( url )
使用絕對或相對 url 位址指定背景圖像
background-repeat : repeat | no-repeat | repeat-x | repeat-y
repeat
預設值。背景圖像在縱向和橫向上平鋪
no-repeat
背景圖像不平鋪
repeat-x
背景圖像僅在橫向上平鋪
repeat-y
背景圖像僅在縱向上平鋪
background-position : length || length
background-position : position || position
length
百分數 | 由浮點數字和機關辨別符組成的長度值。
position
top | center | bottom | left | center | right
background-position屬性說明：
必須先指定 background-image 屬性。
預設值為： 0% 0% 。此時背景圖檔左上角将被定位于容器的左上角。
如果隻指定了一個值，該值将用于橫坐标。縱坐标将預設為 50% 。如果指定了兩個值，第二個值将用于縱坐标。
定位圖像位置有三種方式：百分比、像素值、對齊方式.
1、對齊方式
對齊方式有5個值top、botton、lef、right、center，分别對應頂部對齊，底部對齊，左對齊，右對齊，居中對齊（對齊就是容器的某一邊跟圖檔的對應邊重疊）
上圖中包含了三個不同樣式按鈕，我們可以在滑鼠點選和輕按兩下時改變它的樣式，
代碼：
展示效果：
類似的我們還可以定義左上、左中、左下、中上、居中、中下、右上、右中、右下幾種樣式來定位圖檔，如:
在介紹像素值和百分比前我們要先了解容器的坐标軸概念：
容器的左上角為坐标原點，向右為正向X軸，向左為反向X軸，向下為正向Y軸，向上為反向Y軸，而所謂的像素值就是圖檔原點和容器坐标原點的坐标差，分别對應background-position中的第一個和第二個參數，這個坐标差的計算就需要我們根據圖檔和容器的大小來對圖檔做相應的移動。
2、像素值
上圖中包含了大量的圖示，現在我們就是選取其中的幾個圖示來說明如何計算像素值：
效果如下：
以DIV1為例來講解
容器DIV1寬為14px，高為18px，我們要獲得向右箭頭就需要将其移動到容器内，是以需要圖檔的原點向左平移113px，再向上平移190px，結合上面坐标軸的概念水準向左為負，垂直向上也為負，是以結果就是-113px -190px；其它三個DIV方法也類似了，歸結起來就是把需要的圖示移動到容器内，然後根據坐标軸計算平移量就可以了，是不是很簡單呀！
3、百分比
百分比的計算方法略顯複雜，圖檔長寬乘以百分比對應的位置和容器長寬乘以百分比對應的位置重疊，如圖：
我們可以通過公式來根據像素值計算出百分比： （容器的寬/高度-圖檔的寬/高度） x 百分比 = 像素值
上圖圖檔我們可以通過百分比的方式把它水準擺放
示例下載下傳：
<a href="http://pan.baidu.com/s/12aMz8">http://pan.baidu.com/s/12aMz8</a>