CSS雪碧 即CSS Sprites，也有人叫它CSS精靈，是一種CSS影象合併技術，該方法是將小圖示和背景影象合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。

使用雪碧圖的優點有以下幾點：

1. 將多張圖片合併到一張圖片中，可以減小圖片的總大小

2. 將多張圖片合併到一張圖片後，只需一次網路請求就可以將所需的資源全部下載，減小建立連線的消耗，在移動端尤為明顯

顯示雪碧圖的條件：

1）需要一個設定好寬和高的容器

2）需要設定background-position的值（預設為（0，0），也就是圖片的左上角），即移動圖片到自己想要的圖示位置。

除錯方法:可以用瀏覽器自帶的除錯工具進行除錯（如chrome瀏覽器按f12即可進行除錯，慢慢移動background-position的值來達到理想的效果）

操作步驟：將圖片向左移X個單位，然後向上移Y個單位，其中XY的具體數值是需要個人除錯至合適位置得出的！

程式碼為：background-position：-xpx -ypx;