寫在開頭的話

最近參加了2017ife的一個任務----自定義checkbox， radio樣式，花了半天時間，摸索出了一條制作雪碧圖的路徑，跟大家分享，如果有更好的制作雪碧圖的方法，希望告知一下，在此感謝。

首先

在網上的圖標庫中尋找你生成雪碧圖所需要的圖標，我在阿里巴巴矢量圖標庫中下載了一個復選框，下載下來之后，我們可以看到圖標中間是白色的，接下來我們需要用一些畫圖軟件把中間的白色改成透明色，也就是傳說中的摳圖，我自己選用的是photoshop。

使用photoshop進行摳圖

1.打開圖片后，選擇菜單欄中的“選擇”---->"色彩范圍"

接著點擊圖標的白色區域，然后點“確定”退出，最后按下鍵盤的delete鍵，中間的白色就變成透明色了。

2.接下來還要用photoshop設置圖標的大小，點擊菜單欄“圖像”的“圖像大小”，設置我們所需要的圖標大小。

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

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

雪碧圖的優缺點

優點：1、減少http訪問次數，因為每次查看一張圖片就會向服務器發起一次http請求，而雪碧圖把一些圖片整合為一張圖片。

缺點：1、內存缺陷；2、頁面縮放有暴露風險3、對爬蟲不友好

最后

到這里制作雪碧圖就結束了，雖然看起來很簡單，但我自己也是摸索了一些時間，希望對你們有所幫助。

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

總結

以上是生活随笔為你收集整理的雪碧图的生成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。