雪碧圖

雪碧圖是什麼？

雪碧圖也叫css精靈， 是一種CSS圖像合成技術。通俗來講：將小圖標合併在一塊兒以後的圖片稱做雪碧圖。

適合拼成雪碧圖的圖片：

• 靜態圖片，不隨用戶信息的變化而變化

• 小圖片，圖片容量小，加載量大

• 能夠本身合成雪碧圖

方法：cssgaga，photoshop，gulp，webpack均可以去嘗試，還有一個網站CSS Sprites Generator，不過貌似缺點是圖片合成後超小

爲何會有雪碧圖？

網站開發90%會用到小圖標， 多小圖標調用顯示是前端開發常見的問題，若是每一個小圖標都單獨調用一張圖片， 即意味着每一個小圖標的顯示都產生一個HTTP請求；

而每一個請求都須要必定的性能開銷，主要在請求、以及響應階段。

爲了減小http請求數量，加速網頁內容顯示，不少網站的導航欄圖標、登陸框圖片等，使用的並非<image>標籤，而是CSS Sprite雪碧圖。

如何利用它來解決問題？

每一個小圖標的使用配合background-position來獲取, background-position使用定位以下X和Y軸，注：原點0，0 位置， 以後X和Y軸均爲負值，定位到圖片左上側起點後根據width和height截取小圖標.

參考文章：原文