之前就發現一些網站吧所有的小圖標拼接在一張圖片中，但是一直不知道這是怎么做到的，今天特地了解了一下，才知道這種用法叫做精靈圖。他的優點是可以減少瀏覽器請求的次數，把所有圖片拼接在一張圖中就只需要請求一次，當瀏覽器需要用到圖片時再從大圖片中解析。這樣可以加快訪問的次數。先來看看效果圖：

拼接的圖片：

他的原理是，先規定好每個小圖標的大小，創建一個和小圖標大小相同的容器，再通過移動背景圖片的方法將大圖中需要的部分暴露在這個容器中。就是說這張圖片就像被一塊布遮住，只是在想要的地方留了一個空，好讓背景圖片暴露出來，這樣只要將將背景圖片一道合適的位置就可以只顯示我們想要的部分。

具體步驟： 1，創建合適大小的容器 2，將拼接的大圖作為容器的背景，并設置為no-repeat 3，改變背景的位置

對于改變背景的位置我們需要知道小圖標在大圖片的的坐標（以大圖的左上角為原點），例如如果小圖標在大圖中的坐標是(10,20)，那么將背景圖片向左移動10px,向上移動20px就可以抵消小圖標在大圖的位置。 獲取這個坐標可以用PS中的切片工具，將小圖標選擇出來后右擊選擇編輯即可看到小圖標的坐標

完整源碼如下：