寫在前面：
在網頁製作中，雪碧圖也是前端攻城獅必須掌握的一項小技能。百度詞條對雪碧圖的解釋是：CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS影象合併技術，該方法是將小圖示和背景影象合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。本文主要內容包括雪碧圖如何製作，雪碧圖優缺點，哪些場景需要使用雪碧圖。
實現原理：
CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標籤變得更加複雜了，圖片是在CSS中定義，而非img標籤。
1.前期準備下載工具：css sprit（css精靈）
長這樣：
看圖片就知道多好用！
檔案不到200k，相當輕便，這是百度雲連結：pan.baidu.com/s/1nuOZDqT
也有mac版本的，這是連結：dl.pconline.com.cn/download/42…
2.使用方法
下載，開啟之後。
1.首先要切一些圖片，不會切的話，移步：《前端ps切圖方法，圖文詳細》
2.開啟雪碧圖，選擇圖片。
3.新增完圖片之後，會自動生成程式碼，需要排列一下圖片：
可以看到排列圖片的時候，下面的程式碼也會跟著重新整理
注意：排列圖片的時候要注意各個圖片之間留點空隙，不然使用的時候，會相互覆蓋。
3.儲存圖片以及雪碧圖css程式碼
儲存雪碧圖
生成的雪碧圖：
儲存雪碧圖-css程式碼（因為軟體沒有到匯出css程式碼的功能，所以要自己新建一個txt檔案，放在雪碧圖旁邊，以後開啟txt就知道圖片在雪碧圖的位置。）
gif操作：
如何在html中使用？
慕課網雪碧圖：
慕課網demo：www.imooc.com/code/1511。
慕課網雪碧圖教程：www.imooc.com/learn/93
3.雪碧圖優劣勢
1.加快網頁載入速度
網頁上面每一張圖片，都要向瀏覽器請求下載圖片，而瀏覽器接受的同時請求數是10個，一次能處理的請求數目是兩個。
http發起請求，最耗時的是在三次握手，每次請求之前都要握手。所以在網頁效能優化中，減少http請求的次數是相當重要的一點！（本來想寫多一點，但有些知識點不太清楚，怕誤人子弟就不再贅述了。）
當一個網頁有幾百張，幾千張圖片的時候載入起來簡直了！而且對於不穩定的網路頻寬，載入起來更是噩夢，所以把圖片拼接為一張大圖，從而加快載入速度，以及加速頁面渲染
2.後期維護簡單
該工具可以直接通過選擇圖片進行圖片的拼接，當然你也可以自己挪動裡面的圖片，自己去佈局你的雪碧圖，更換圖片的時候也只要更改一下圖片的位置就可以了。直接生成程式碼，簡單易用
3、CSS Sprites能減少圖片的位元組，曾經比較過多次3張圖片合併成1張圖片的位元組總是小於這3張圖片的位元組總和。
4、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的製作效率。
5、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。
關於雪碧圖的缺點內容：不要濫用雪碧圖sprite
裡面說了蠻多的，這事情可以根據使用場景來決定，大家可以看看，畢竟我是來教雪碧圖的。。。
下面有關於雪碧圖的demo。
之前寫過兩篇相關的：
1.前端ps切圖方法，圖文詳細
2.ps切圖實用小技巧、圖片格式的區別及相關內容
以上，2017.4.10。
最後又到了觀眾朋友們最喜歡的求贊求關注環節：希望看完的朋友點個喜歡，也可以關注一下我，現在這階段基本上每個月都不會少於十五篇文章（看到乾貨我也會進行分享）。碼字不易，感謝支援，感激不盡！
ps：目前待業，座標北京，求推薦工作。然後希望我寫哪方面的文章可以在底下評論，或者是私信我，雖然寫的不好，但我就當這是記錄自己成長的一種方式咯。（前提是我會了，如果不會我也會記下來，等會了的時候再更出來。）
**掘金個人主頁 ，簡書主頁連結，csdn部落格主頁連結 ，github 。