望收藏了我寫的文章的你同時(shí)可以關(guān)注一下“小海前端”，因?yàn)檫@些文章都是連載的，并且是經(jīng)過我系統(tǒng)的歸納過的。

【技術(shù)等級(jí)】初級(jí)

【承接文章】《CSS背景屬性實(shí)戰(zhàn)，靈活使用background屬性，原來如此簡(jiǎn)單》

本文小海老師為大家詳細(xì)講解圖片精靈（CSS Sprite）的使用。本文屬于前端開發(fā)的初級(jí)教程，適合于剛剛開始接觸CSS技術(shù)的學(xué)習(xí)者。

一、什么是圖片精靈：

在一個(gè)網(wǎng)站中，圖片是必不可少的。除了用來展示的大圖片以外，還可能包括大量的圖標(biāo)。這些圖標(biāo)幅面一般較小，往往制作的較為成套，還可能出現(xiàn)一個(gè)圖標(biāo)多次使用的情況。

頁(yè)面每次加載圖標(biāo)，都需要向網(wǎng)站的服務(wù)器提交一次Http請(qǐng)求。如果能夠減少頁(yè)面的Http請(qǐng)求次數(shù)，就可以提高網(wǎng)頁(yè)的顯示速度（當(dāng)然，網(wǎng)頁(yè)的顯示速度還與很多因素有關(guān)）。

鑒于上述原因，我們想到的解決方案如下：

將網(wǎng)站中用到的所有圖標(biāo)都做到一張大圖片之中，在需要顯示圖標(biāo)的位置處，利用CSS的background-image屬性加載這個(gè)大圖片，再利用background-position屬性定位需要顯示的圖標(biāo)的具體位置。

這就是圖片精靈（CSS Sprite）的使用原因和工作原理。下圖為我們展示了搜狐網(wǎng)的精靈圖，如下所示。

搜狐網(wǎng)站的精靈圖實(shí)例

那么，如何制作這張大圖片呢？又如何使用CSS屬性來實(shí)現(xiàn)這個(gè)功能呢？小海老師一步一步的教大家完成圖片精靈技術(shù)的使用。

二、第一步：制作精靈圖。

原理中提到的所有圖標(biāo)都在其上的大圖片，我們就把它稱為“精靈圖”。為了讓精靈圖中的圖標(biāo)可以用在不同背景下的場(chǎng)合中，一般精靈圖都應(yīng)該是背景透明的png格式圖片。

我們可以使用Adobe Photoshop 軟件來制作精靈圖片。

制作精靈圖片時(shí)，要將每一個(gè)圖標(biāo)的位置都擺好，盡量讓所有圖標(biāo)都鋪滿精靈圖片。最后保存的時(shí)候，可以在Photoshop中按照下列操作進(jìn)行保存：

“文件”菜單 | 存儲(chǔ)為Web和設(shè)備所用格式

選擇上述命令后，Photoshop會(huì)彈出下圖中所示的窗口。

存儲(chǔ)為Web和設(shè)備所用格式

在這個(gè)窗口中：選擇“png-24”，勾選“透明度”，單擊“存儲(chǔ)”。就可以保存為背景透明的png格式的圖片了。

三、第二步：獲得所需圖標(biāo)在精靈圖中的數(shù)據(jù)。

例如在一個(gè)<div></div>容器中需要加載精靈圖中的一個(gè)圖標(biāo)。那么，需要知道這個(gè)圖標(biāo)的下列數(shù)據(jù)：

• 圖標(biāo)的大小：包括圖標(biāo)的寬度和高度。

• 圖標(biāo)在精靈圖中的位置：包括圖標(biāo)在精靈圖中的水平坐標(biāo)和垂直坐標(biāo)。

圖標(biāo)的大小往往較為簡(jiǎn)單，因?yàn)閳D標(biāo)是設(shè)計(jì)師自己設(shè)計(jì)并制作的，所以一開始就會(huì)知道圖標(biāo)的尺寸。

那么，圖標(biāo)在精靈圖中的位置要如何知道呢？這需要借助Photoshop中的“信息”面板。

利用“信息”面板獲得圖標(biāo)在精靈圖中的坐標(biāo)

在Photoshop中打開“信息”面板有下列幾種方法：

• 在“窗口”菜單 | 信息。

• 使用快捷鍵：F8

在“信息”面板中的X和Y就會(huì)顯示光標(biāo)所在位置的坐標(biāo)。我們只需將光標(biāo)放在所要圖標(biāo)的左上角，就可以通過該面板中的X和Y后面的數(shù)據(jù)得知該圖標(biāo)在精靈圖中的位置了。

四、第三步：利用CSS加載精靈圖中的圖標(biāo)。

在HTML文檔中有一個(gè)<div></div>標(biāo)記對(duì)，該標(biāo)記對(duì)的id屬性取值為box。該標(biāo)記對(duì)要展示一個(gè)寬度為200px，高度為50像素的圖標(biāo)。通過在Photoshop中測(cè)量，該圖標(biāo)在精靈圖中的坐標(biāo)為X:140、Y:52。假設(shè)精靈圖存放在站點(diǎn)根目錄的images文件夾中，文件名為 sprite.png。則下列CSS代碼就可以為這個(gè)<div></div>標(biāo)記對(duì)加載圖標(biāo)了。

<div id=”box”></div>

#box{

width:200px; height:50px;

background-image:url(../images/sprite.png);

background-position:-140px -52px;

}

為什么這樣書寫就可以得到這個(gè)圖標(biāo)呢？

首先，容器的寬度和高度限制了只能顯示精靈圖片中200px*50px大小的一個(gè)區(qū)域，并不能完全顯示精靈圖的全部?jī)?nèi)容。

其次，background-position 屬性用于表示背景圖片在容器中的位置。為什么是負(fù)值呢？請(qǐng)仔細(xì)看下圖。

圖片精靈的原理

我們很容易看到，選擇負(fù)值，相當(dāng)于精靈圖的位置在容器的外部，所以指定位置的圖標(biāo)就顯示在容器中了。

文章預(yù)告

下一篇文章中，小海老師會(huì)繼續(xù)為大家向下講解CSS屬性。下一次我們講解列表屬性。對(duì)于渴望在前端開發(fā)道路上前進(jìn)的你一定不能錯(cuò)過！

小海教材

如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會(huì)免費(fèi)將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。

小海聲明

在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識(shí)，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗(yàn)，每寫一篇時(shí)我都盡量把握好措辭，用簡(jiǎn)單易懂的語(yǔ)言描述，同時(shí)精心設(shè)計(jì)版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長(zhǎng)，但是都要耗費(fèi)小海老師很久的時(shí)間。

希望收藏了我寫的文章的你同時(shí)可以關(guān)注一下“小海前端”，因?yàn)檫@些文章都是連載的，并且是經(jīng)過我系統(tǒng)的歸納過的。

關(guān)注“小海前端”，我會(huì)繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅(jiān)持的走下去。