雪碧圖的生成

寫在開頭的話

最近參加了2017ife的一個任務----自定義checkbox， radio樣式，花了半天時間，摸索出了一條製做雪碧圖的路徑，跟你們分享，若是有更好的製做雪碧圖的方法，但願告知一下，在此感謝。

首先

在網上的圖標庫中尋找你生成雪碧圖所須要的圖標，我在阿里巴巴矢量圖標庫中下載了一個複選框，下載下來以後，咱們能夠看到圖標中間是白色的，接下來咱們須要用一些畫圖軟件把中間的白色改爲透明色，也就是傳說中的摳圖，我本身選用的是photoshop。

使用photoshop進行摳圖

1.打開圖片後，選擇菜單欄中的「選擇」---->"色彩範圍"

接着點擊圖標的白色區域，而後點「肯定」退出，最後按下鍵盤的delete鍵，中間的白色就變成透明色了。

2.接下來還要用photoshop設置圖標的大小，點擊菜單欄「圖像」的「圖像大小」，設置咱們所須要的圖標大小。

使用css-sprite將多個圖標合成一張雪碧圖

下面的數據就是咱們設置CSS中background-position所須要的位置

雪碧圖的優缺點

優勢：一、減小http訪問次數，由於每次查看一張圖片就會向服務器發起一次http請求，而雪碧圖把一些圖片整合爲一張圖片。

缺點：一、內存缺陷；二、頁面縮放有暴露風險三、對爬蟲不友好

最後

到這裏製做雪碧圖就結束了，雖然看起來很簡單，但我本身也是摸索了一些時間，但願對大家有所幫助。

這是個人此次任務的demo-----自定義checkbox， radio樣式demo