> **雪碧圖**:Sprite PNG background Icons,是作為切圖師、頁面重構師、前端頁面制作師的一門必備技藝。
> **原料**:CSS背景圖片定位,多圖標拼合成的PNG圖片。
> **制作工藝**:把多個大小相同的圖標放在一個PNG圖片里,然后用CSS背景圖片附加到圖標元素中顯示,從而減少頁面的http請求,縮小圖片的總體積。
蘋果從前有個導航條,被人不斷模仿:

普通PC網頁中,雪碧圖是比較好做的,這里不贅述。需要學習詳情的看官,請自行搜索!
=>小編給你推薦一篇:[CSS sprite的應用](http://www.cnblogs.com/myjavawork/articles/1981345.html)
---
重點開始了~
### 移動端的雪碧圖
這個雪碧圖應用到移動端會怎么樣呢?