一、什么是雪碧圖？
1、我們先來看一下淘寶上面用到的雪碧圖實例：
a、前端展示
b、css雪碧圖為
2、概念
CSS sprite在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
3、什么時候用到雪碧圖？
a、靜態圖片，不隨用戶信息的辯護而變化
b、小圖片，圖片容量比較小
c、加載量比較大
4、工具介紹
剛剛下載了一個比較實用的雪碧圖工具Css Sprite Tools(CST CSS圖片拼合定位工具) 1.0(方便自己下載)
5、工具使用步驟
①、用ps把小圖片切好
②、打開軟件
③、打開圖片
點擊左上角的“選擇多幅小背景圖片”，選擇多張圖片，點擊打開
④、排布圖片
可以選擇上面的最上面按鈕今天橫豎的默認排布，也可以鼠標選中圖片拖動位置，拖動完成后程序會根據內部圖片的位置生成面積最小的雪碧圖，當然也會改變相應的圖片位置
我是自己排的
⑤、代碼生成
點擊“選擇目錄並生成測試文件”按鈕
點擊確定
⑥、保存雪碧圖
⑦、前端展示
⑧、材料
所需要的代碼就在css/bgs.css文件里面
所需要的圖片在imgs里
堅持把每一個小知識點弄明白、徹底！！！