css雪碧圖（css sprite），其實質就是一種css圖像合并的技術。在我們前端開發過程中也多多少少會用到。很早就打算專門寫一個相關的demo，今天就趁着這篇博文給做了。demo見我的github倉庫檔案，相關實作的代碼雖然也easy，但也不在這發了（
）：點選打開連結。
使用css sprite的相關案例：去電商網站，打開開發者模式，很多。但是也不隻是局限在電商網站裡才使用！
前端開發裡雪碧圖原理：
将很多需要加載的圖貼到一起，以圖檔左上角頂點為原點建立坐标系，然後用background-position：x軸 y軸；來确定在大圖中需要的那一張小圖的位置即可。簡而言之，言而簡之就是一個background-position屬性。
雪碧圖的實作：
關于這裡說的實作是指衆多小圖內建的大圖這個過程。
1：ps（photoshop）：這個就靠我們偉大的美工了（呸，原諒我口誤，是設計師大大），當然作為新時達的大前端我們也還是需要掌握ps滴；
2：相關的sprite自動化生成工具（例如：cssGaga）：親，還有請自行Google哦！（劃下重點：不要搜成ladygaga了）
嗯，好像說webpack裡也有相關的依賴子產品，老規矩：Google（
）。
使用該技術的優點：
減少了加載網頁圖檔時對伺服器的請求次數，提高了頁面的加載速度。
使用該技術的缺點：
拼圖和維護比較麻煩；雪碧圖調用的圖檔不能被列印；記憶體問題。
适用css sprite的條件：
加載量大的小圖， 就是說我們很多頁面都會用到小圖示啊這類的；還有就是圖檔是靜态的，也就是說時時重新整理的新聞圖檔啊不可用。