在網頁開發中我們經常需要對圖片進行分割（如下圖）來使用，而不是分別提供單獨的圖片來調用，常見的如頁面背景，按鈕圖標等，這樣做的好處就是減少請求次數，節省時間和帶寬。
對背景圖片的定位就需要用到CSS中的background樣式，如：
div{ background-image: url("1234.png"); background-repeat: no-repeat; background-position: 0px -100px; }
屬性解釋：
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，分別對應頂部對齊，底部對齊，左對齊，右對齊，居中對齊（對齊就是容器的某一邊跟圖片的對應邊重疊）
上圖中包含了三個不同樣式按鈕，我們可以在鼠標點擊和雙擊時改變它的樣式，
代碼：
<html> <head> <style> div{ background-image: url("browseBtn.png"); background-repeat: no-repeat; cursor: hand; width: 80px; height: 24px; } .button1{ background-position: top; } .button2{ background-position: center; } .button3{ background-position: bottom; } </style> <script> function clickButton() { document.getElementById('button').className = "button2"; } function dblclick() { document.getElementById('button').className = "button3"; } </script> </head> <body> <div id="button" class="button1" onclick="clickButton()" ondblclick="dblclick()"></div> </body> </html>
展示效果：
默認效果
單擊效果
雙擊效果
類似的我們還可以定義左上、左中、左下、中上、居中、中下、右上、右中、右下幾種樣式來定位圖片，如:
在介紹像素值和百分比前我們要先了解容器的坐標軸概念：
容器的左上角為坐標原點，向右為正向X軸，向左為反向X軸，向下為正向Y軸，向上為反向Y軸，而所謂的像素值就是圖片原點和容器坐標原點的坐標差，分別對應background-position中的第一個和第二個參數，這個坐標差的計算就需要我們根據圖片和容器的大小來對圖片做相應的移動。
2、像素值
![clip_image001[1]](/image/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNDc4NzkwLzIwMTQwOS8xNTIzMTEyNDQ0MDkzODMucG5n.png "clip_image001[1]")
上圖中包含了大量的圖標，現在我們就是選取其中的幾個圖標來說明如何計算像素值：
<html> <head> <style> .but1, .but2, .but3, .but4{ background-image: url("ui-icons.png"); background-repeat: no-repeat; float: left; cursor: hand; /*border: 1px solid;*/ } .but1{ width: 14px; height: 18px; border-right-width:0px; background-position: -113px -190px; } .but2{ width: 14px; height: 18px; border-right-width:0px; background-position: -113px -126px; } .but3{ width: 14px; height: 18px; border-right-width:0px; background-position: 0px -110px; } .but4{ width: 14px; height: 18px; background-position: -240px -126px; } </style> </head> <body> <div class="but1"></div> <div class="but2"></div> <div class="but3"></div> <div class="but4"></div> </body> </html>
效果如下：
以DIV1為例來講解
容器DIV1寬為14px，高為18px，我們要獲得向右箭頭就需要將其移動到容器內，所以需要圖片的原點向左平移113px，再向上平移190px，結合上面坐標軸的概念水平向左為負，垂直向上也為負，所以結果就是-113px -190px；其它三個DIV方法也類似了，歸結起來就是把需要的圖標移動到容器內，然后根據坐標軸計算平移量就可以了，是不是很簡單呀！
3、百分比
百分比的計算方法略顯復雜，圖片長寬乘以百分比對應的位置和容器長寬乘以百分比對應的位置重疊，如圖：
我們可以通過公式來根據像素值計算出百分比： （容器的寬/高度-圖片的寬/高度） x 百分比 = 像素值
上圖圖片我們可以通過百分比的方式把它水平擺放
<html> <head> <style> .but1, .but2, .but3, .but4{ background-image: url("1234.png"); background-repeat: no-repeat; width: 100px; height: 100px; float: left; } .but1{ background-position: 0% 0%; } .but2{ background-position: 0px 33.33%; } .but3{ background-position: 0px 66.66%; } .but4{ background-position: 0px 100%; } </style> </head> <body> <div class="but1"></div> <div class="but2"></div> <div class="but3"></div> <div class="but4"></div> </body> </html>
效果如下：
示例下載：