css中雪碧圖(sprite)的使用及制作方法


雪碧圖(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工具進行合成。

CssSprite.exe使用較為簡單,選擇圖片后,可以豎排或橫排,也能手動調整位置;設置css中路徑名及保存名稱,生成雪碧圖即可,可以同時生成對應的css代碼。

 

 工具源碼地址:

https://github.com/iwangx/sprite

編譯后的exe工具:

https://github.com/shiyuan598/htmlcss/raw/master/sprite/tools/CssSprite.exe

 

另外也有在線工具可用:

https://www.toptal.com/developers/css/sprite-generator

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM