什麼是雪碧圖？
雪碧圖是根據CSS sprite音譯過來的，就是將很多很多的小圖標放在一張圖片上，就稱之爲雪碧圖。
使用雪碧圖的目的：有時爲了美觀，我們會使用一張圖片來代替一些小圖標，但是一個網頁可能有很多很多的小圖標，瀏覽器在顯示頁面的時候，就需要像服務器發送很多次訪問請求，這樣一來，一是造成資源浪費，二是會導致訪問速度變慢。這時候，把很多小圖片（需要使用的小圖標）放在一張圖片上，按照一定的距離隔開，就解決了上述的兩個問題。
顯示雪碧圖的條件：
1）需要一個設置好寬和高的容器
2）需要設置background-position的值（默認爲（0，0），也就是圖片的左上角），即移動圖片到自己想要的圖標位置。
調試方法:可以用瀏覽器自帶的調試工具進行調試（如chrome瀏覽器按f12即可進行調試，慢慢移動background-position的值來達到理想的效果）
案例如下圖所示：
我們把表情放在一張圖片上，圖片的背景色爲透明！
照片中有標記部分表情的位置爲（0，0）；也就是說我們想要顯示圖中標記的表情只需將background-position設置爲（0，0）即可！
下面問題來了，如果我們想顯示其他表情，應該怎樣調整圖片的background-position呢？
注意點：我們在一個頁面上設置了盒子的寬高，想要將一個表情顯示在盒子內，我們是不能移動盒子的位置的，我們只能改變圖片的位置。比如我想顯示下面表情
操作步驟：將圖片向左移X個單位，然後向上移Y個單位，其中XY的具體數值是需要個人調試至合適位置得出的！
代碼爲：background-position：-xpx -ypx;
本博客由博主原創，如需轉載需說明出處！謝謝支持！