雪碧圖(sprite)是減少請求次數的有效手段，其原理是把多張圖片進行合成，使用時通過css進行定位。
1.先看一下雪碧圖
沒有使用雪碧圖時圖標是這樣一個個的單獨文件：
合成雪碧圖后是這樣拼在一起的一張圖：
2.雪碧圖的使用
首先確定要使用的圖標的位置和大小（可以通過ps測量），
如下的雪碧圖大小統一，排列規則
它們的大小均為30px*30px，第一個圖標位置為0 0，第二個的位置為30px 0，依次...
樣式可以這樣寫：
1 .box1 li:nth-child(1) { 2 width: 30px; 3 height: 30px; 4 background: url(./images/map-icon.png) no-repeat 0 0; /* 第一個圖標*/ 5 } 6 7 .box1 li:nth-child(2) { 8 width: 30px; 9 height: 30px; 10 background: url(./images/map-icon.png) no-repeat -30px 0; /* 第二個圖標*/ 11 } 12 13 .box1 li:nth-child(3) { 14 width: 30px; 15 height: 30px; 16 background: url(./images/map-icon.png) no-repeat -60px 0; /* 第三個圖標*/ 17 }
排列不規則的雪碧圖測量計算就不太方便了，推薦一個在線雪碧圖樣式工具http://tools.jb51.net/code/css_sprite
3.合成雪碧圖
如果沒有美工MM給我們做圖，自己找來的很多零碎圖標(.png)可以使用CssSprite工具進行合成。
使用較為簡單，選擇圖片后，可以豎排或橫排，也能手動調整位置；設置css中路徑名及保存名稱，生成雪碧圖即可，可以同時生成對應的css代碼。
轉載請注明來源: 007辦公資源網站 https://www.wode007.com