在寫網頁過程中，會遇到這種需要多個圖標展示: 如上圖中的「女裝」文字左邊的圖標。容易想到的解決方法是為每張圖片加入<img>標簽，但這樣做會增加HTTP請求數量，影響網站載入速度。比這更優的解決方案是：雪碧圖sprite。 所謂雪碧圖就是把我們所需要的所有小圖片用CSS sprite或者PS工具拼接
在寫網頁過程中，會遇到這種需要多個圖標展示:
如上圖中的「女裝」文字左邊的圖標。容易想到的解決方法是為每張圖片加入<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）
