CSS精靈技術(shù)（sprite）

精靈技術(shù)產(chǎn)生的背景

圖所示為網(wǎng)頁(yè)的請(qǐng)求原理圖，當(dāng)用戶(hù)訪(fǎng)問(wèn)一個(gè)網(wǎng)站時(shí)，需要向服務(wù)器發(fā)送請(qǐng)求，網(wǎng)頁(yè)上的每張圖像都要經(jīng)過(guò)一次請(qǐng)求才能展現(xiàn)給用戶(hù)。

然而，一個(gè)網(wǎng)頁(yè)中往往會(huì)應(yīng)用很多小的背景圖像作為修飾，當(dāng)網(wǎng)頁(yè)中的圖像過(guò)多時(shí)，服務(wù)器就會(huì)頻繁地接受和發(fā)送請(qǐng)求，這將大大降低頁(yè)面的加載速度。為了有效地減少服務(wù)器接受和發(fā)送請(qǐng)求的次數(shù)，提高頁(yè)面的加載速度，出現(xiàn)了CSS精靈技術(shù)（也稱(chēng)CSS Sprites、CSS雪碧）。

精靈技術(shù)本質(zhì)

簡(jiǎn)單地說(shuō)，CSS精靈是一種處理網(wǎng)頁(yè)背景圖像的方式。它將一個(gè)頁(yè)面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應(yīng)用于網(wǎng)頁(yè)，這樣，當(dāng)用戶(hù)訪(fǎng)問(wèn)該頁(yè)面時(shí)，只需向服務(wù)發(fā)送一次請(qǐng)求，網(wǎng)頁(yè)中的背景圖像即可全部展示出來(lái)。通常情況下，這個(gè)由很多小的背景圖像合成的大圖被稱(chēng)為精靈圖，如下圖所示為京東網(wǎng)站中的一個(gè)精靈圖。

精靈技術(shù)的使用

CSS 精靈其實(shí)是將網(wǎng)頁(yè)中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個(gè)網(wǎng)頁(yè)元素通常只需要精靈圖中不同位置的某個(gè)小圖，要想精確定位到精靈圖中的某個(gè)小圖，就需要使用CSS的background-image、background-repeat和background-position屬性進(jìn)行背景定位，其中最關(guān)鍵的是使用background-position屬性精確地定位。

制作精靈圖

CSS 精靈其實(shí)是將網(wǎng)頁(yè)中的一些背景圖像整合到一張大圖中（精靈圖），那我們要做的，就是把小圖拼合成一張大圖。

大部分情況下，精靈圖都是網(wǎng)頁(yè)美工做。

我們精靈圖上放的都是小的裝飾性質(zhì)的背景圖片。 插入圖片不能往上放。
我們精靈圖的寬度取決于最寬的那個(gè)背景。 
我們可以橫向擺放也可以縱向擺放，但是每個(gè)圖片之間，間隔至少隔開(kāi)偶數(shù)像素合適。
在我們精靈圖的最低端，留一片空隙，方便我們以后添加其他精靈圖。

結(jié)束語(yǔ)： 小公司，背景圖片很少的情況，沒(méi)有必要使用精靈技術(shù)，維護(hù)成本太高。 如果是背景圖片比較多，可以建議使用精靈技術(shù)。