在寫網頁過程中，會遇到這種需要使用多個小圖標:
如上圖中的「女裝」文字左邊的圖標。容易想到的解決方法是為每張圖片加入<img>標簽，但這樣做會增加HTTP請求數量，影響網站加載速度。比這更優的解決方案是：雪碧圖sprite。
所謂雪碧圖就是把我們所需要的所有小圖片用CSS sprite或者PS工具拼接成一張大圖片，然后通過元素的background-image、background-positon屬性完成圖片的定位。
為此，我做了個Demo。
在學習的過程中，遇到了背景圖片定位的問題，也就是background-position屬性使用以及如何在這張大圖片中定位到要顯示的小圖標。
問題簡化就是：
答案是把這張圖片設置為div的背景圖。然后移動圖片使圖片3在div區域顯示。
假設4張小圖大小一樣，都是25x25像素，div也是25x25像素。因為把大圖片設置為div的背景圖時，默認圖片的左上角頂點是與div區域的頂點重合的，所以要將「小圖片3」向上垂直移動，水平方向保持不變。因此設置background-position:0px,-25px;(圖片像素的定位可用CSS sprite工具查看)。
就是這么個簡單的問題，但我之前出於兩點理解失誤始終理解不了為什么像素值是負數。比如一個無序列表<ul>中每一項的<li>都設置背景圖片為這個大圖片，當顯示的時候，就像在一張完整的圖片每個區域開個洞，各自看這張大圖的局部，我這樣理解就解釋不了兩個<li>怎么都顯示一樣的小圖片。我之所以有這樣的理解是因為我忽略了每個li獨自擁有這張大圖，然后再移動這張大圖，想顯示哪個區域就顯示哪個區域。再，為什么像素值是負數呢？我網上搜，發現也有不理解的網友認為直接把這個像素值為負數記住就行，有網友認為是div頂點動，圖片不動，但也解釋不通。后來查到的兩句話點醒了我：
- 怎么說呢，圖片定位技術，實際上相當於開了一個窗戶，你透過窗戶看外面的景色。你的窗戶大小是不會變的，但是景色卻能改變位置，整張雪碧圖，就是一個大的風景，通過控制他的定位，你就可以看到不同的風景，所以，可以先做適合大小的圖片，然后再整合到一起去，通過負定位進行上移或左移，達到能讓這個窗戶顯示自己正確背景的位置。
- 以圖片左上角為原點，整張圖片向左和向上移為負，整張圖片向右和向下移為正。
有錯誤之處，還請指正。
參考資料：
本文Demo下載:
模仿淘寶導航條（提取碼：e0f5）
background-position屬性
1.在使用關鍵字和百分比值的情況下，設定的值同時應用於元素和背景圖片。換句話說，如果設定了33% 33%，則圖片水平33%的位置與元素水平33%的位置對齊。垂直方面也一樣。例如，background-position:center center;設定圖片中心點與元素中心點重合，然后再向各個方向重復。（把一張圖片放好，再在水平和垂直方向上重復。）
2.像素之類的絕對單位數值就不一樣了。要是用像素單位來設定位置，那么圖片的左上角會被放在距離元素左上角指定位置的地方。
3.有意思的是，還可以使用負值。這樣就可以把圖片的左上角定位到元素外部，從而在元素中只能看到部分圖片。