雪碧圖(sprite)是減少請(qǐng)求次數(shù)的有效手段，其原理是把多張圖片進(jìn)行合成，使用時(shí)通過css進(jìn)行定位。

1.先看一下雪碧圖

沒有使用雪碧圖時(shí)圖標(biāo)是這樣一個(gè)個(gè)的單獨(dú)文件：

合成雪碧圖后是這樣拼在一起的一張圖：

2.雪碧圖的使用

首先確定要使用的圖標(biāo)的位置和大小（可以通過ps測(cè)量），

如下的雪碧圖大小統(tǒng)一，排列規(guī)則

它們的大小均為30px*30px，第一個(gè)圖標(biāo)位置為0 0，第二個(gè)的位置為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; /* 第一個(gè)圖標(biāo)*/
 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; /* 第二個(gè)圖標(biāo)*/
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; /* 第三個(gè)圖標(biāo)*/
17 }

頁面上效果：

排列不規(guī)則的雪碧圖測(cè)量計(jì)算就不太方便了，推薦一個(gè)在線雪碧圖樣式工具h(yuǎn)ttp://tools.jb51.net/code/css_sprite

3.合成雪碧圖

如果沒有美工MM給我們做圖，自己找來的很多零碎圖標(biāo)(.png)可以使用CssSprite工具進(jìn)行合成。

CssSprite.exe使用較為簡單，選擇圖片后，可以豎排或橫排，也能手動(dòng)調(diào)整位置；設(shè)置css中路徑名及保存名稱，生成雪碧圖即可，可以同時(shí)生成對(duì)應(yīng)的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

總結(jié)

以上是生活随笔為你收集整理的css中雪碧图(sprite)的使用及制作方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。