原標(biāo)題：關(guān)于CSS Sprites、CSS精靈的詳細(xì)解析

CSS Sprites簡(jiǎn)介

Css sprites 可翻譯為css精靈，也有人翻譯為css雪碧，因?yàn)閟prite也有雪碧的意思。在國(guó)內(nèi)習(xí)慣成他為圖片整合技術(shù)，說(shuō)起來(lái)這個(gè)稱(chēng)呼也是滿貼切的，因?yàn)樗_實(shí)是多張圖片整合為一整圖片的技術(shù)，為什么要把多張圖整合到一張上呢，這樣做有什么好處呢？因?yàn)檫@樣的話，當(dāng)您訪問(wèn)該頁(yè)面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來(lái)了。

CSS Sprites原理

Css sprites是將多張零散的背景圖片整合到一張背景圖上，然后通過(guò)background-position來(lái)調(diào)整背景的位置，這個(gè)時(shí)候你必須確保使用該張精靈圖的容器要比背景圖片小才是OK的，不然很容易漏出其他的背景圖片，所以尤其要控制好盒子的大小；其次，你還需要注意書(shū)寫(xiě)背景定位的時(shí)候極大多數(shù)都是負(fù)的，水平為負(fù)數(shù)，圖片才會(huì)往左側(cè)平移，所以才會(huì)顯示出你需要的那部分背景圖，垂直方向也是同理。當(dāng)多個(gè)盒子引用一張背景圖時(shí)，只需要改變背景定位就可以改變頁(yè)面中的顯示部分為哪一部分背景圖，這樣做的目的就是為了降低瀏覽器向服務(wù)器的請(qǐng)求次數(shù)，這樣一來(lái)可以大大提高網(wǎng)頁(yè)的加載速度。

CSS Sprites優(yōu)缺點(diǎn)

CSS Sprites 的優(yōu)點(diǎn)：

1、利用CSS Sprites能夠減少瀏覽器向服務(wù)器的請(qǐng)求次數(shù)，減少http請(qǐng)求，從而提高頁(yè)面的性能，這是圖片精靈的最顯著特點(diǎn)，也是被廣泛應(yīng)用的主要原因。

2、利用圖片精靈還能減少圖片的字節(jié)，你使用9張小的圖片，一張4KB，9張就是36KB，而把他們都放一張圖片上，只需要4KB到5KB就可，所以減少圖片字節(jié)也是顯而易見(jiàn)的。

3、在整理圖片的過(guò)程中，不需要再糾結(jié)如此大量圖片的名字問(wèn)題，多張放在一張上，只需要取一個(gè)綜合的名字就可以了，如此便提高了工作效率。

4、如果想改變網(wǎng)站風(fēng)格，你只需要處理一張圖片就可以了，把一張圖片的顏色和風(fēng)格一改，那么整個(gè)網(wǎng)站的風(fēng)格就都變了，便于后期的維護(hù)和修改。

CSS Sprites 的缺點(diǎn)：

1、在應(yīng)用精靈圖片的時(shí)候，你需要考慮當(dāng)前盒子會(huì)不會(huì)漏出其他的背景圖，這個(gè)還好，比較頭疼的是，頁(yè)面自適應(yīng)時(shí)，背景圖的位置就沒(méi)那么容易掌控了。

2、制作精靈圖的過(guò)程比較繁瑣，你需要處理好每張圖之間的距離和位置，如果做得不合理，那么使用起來(lái)就比較麻煩了，甚至需要單獨(dú)創(chuàng)建一個(gè)空的盒子來(lái)裝背景圖。

3、使用精靈圖的頁(yè)面后期維護(hù)帶來(lái)了繁瑣，因?yàn)樗嵌鄰垐D在一張圖上，牽一發(fā)而動(dòng)全身的感覺(jué)，你改變一張背景圖，如果大小發(fā)生變化，那么其他的你就得動(dòng)，只要你動(dòng)了，那么所有的背景定位都將需要改變，所以一旦需要更改背景圖的話，輕易不要改變其他圖片的位置，原位能放下就在原位改，放不下就在下面添加。

CSS Sprites的使用

1、如果你的精靈圖是整整齊齊的一豎排或者一橫排，并且每一個(gè)背景圖的尺寸都是一致的，那么你就幸運(yùn)了，因?yàn)檫@樣我們就不需要對(duì)每一個(gè)被那個(gè)圖的位置都進(jìn)行測(cè)量了，比如這張背景圖：

他實(shí)現(xiàn)的頁(yè)面效果就是和它等尺寸的一個(gè)小導(dǎo)航：

其中灰色為當(dāng)前狀態(tài)，橘色為鼠標(biāo)以上的狀態(tài)，這個(gè)精靈圖就是個(gè)合理整齊的精靈圖，代碼書(shū)寫(xiě)起來(lái)也會(huì)方便很多，至少不需要每一個(gè)都進(jìn)行測(cè)量，代碼如下：

基本結(jié)構(gòu)：

相關(guān)樣式：

2、如果導(dǎo)航是橫著的，那么精靈圖最好都制作成豎向排列的，除非你的導(dǎo)航和背景相同尺寸，像如上案例，如果你沒(méi)有做成豎向的，而做成了橫向，那么你就需要一個(gè)單獨(dú)的盒子來(lái)裝背景圖了，沒(méi)辦法使用padding-left來(lái)擠出背景的位置了，因?yàn)閮?nèi)容區(qū)也是支持背景的，請(qǐng)看這個(gè)背景圖：

這張圖不僅橫向排列，而且周?chē)喑龊芏嗫沼嗟膮^(qū)域，這就會(huì)給前端帶來(lái)很多的麻煩，這張圖要實(shí)現(xiàn)的目標(biāo)效果是：

看似很簡(jiǎn)單的頁(yè)面，可是代碼卻比正常多出很多：

基本結(jié)構(gòu)：

里面不得不使用一個(gè)span來(lái)裝背景圖；

相關(guān)樣式：

單獨(dú)對(duì)span進(jìn)行定義樣式。

3、精靈圖也會(huì)經(jīng)常和滑動(dòng)門(mén)一起使用，這個(gè)時(shí)候你就需要注意了，同時(shí)編輯兩個(gè)圖片的位置關(guān)系，看下面頁(yè)面效果：

使用的是下面兩張精靈圖：

這個(gè)時(shí)候你鼠標(biāo)移上就需要改變兩個(gè)背景定位了，尤其注意子盒子的水平位置，代碼如下：

基本結(jié)構(gòu)：

相關(guān)樣式：

鼠標(biāo)移上要同時(shí)改變兩個(gè)標(biāo)簽的背景圖片。

總結(jié)：在精靈圖的使用過(guò)程中，精靈圖做的標(biāo)不標(biāo)準(zhǔn)就決定于頁(yè)面書(shū)寫(xiě)的難易程度，所以說(shuō)一個(gè)整齊規(guī)范的精靈圖使用起來(lái)也是很舒服的。

這里再給大家陳列幾張常見(jiàn)的精靈圖：

這張精靈圖實(shí)現(xiàn)的頁(yè)面效果是：

這也是個(gè)不錯(cuò)的精靈圖，使用起來(lái)方便快捷。

第二組是名鞋庫(kù)里面的精靈圖：

第一張使用起來(lái)就要比第二張方便的多。

還有這些：

這些都是精靈圖，就是用來(lái)書(shū)寫(xiě)鼠標(biāo)以上的酷炫效果的，精靈圖不見(jiàn)得非得弄很多很多的圖，太多了反而會(huì)增加負(fù)擔(dān)，增加書(shū)寫(xiě)頁(yè)面的負(fù)擔(dān)，增加頁(yè)面加載的負(fù)擔(dān)。

來(lái)源：千鋒HTML5返回搜狐，查看更多

責(zé)任編輯：

總結(jié)

以上是生活随笔為你收集整理的html中精灵图的使用方法,关于CSS Sprites、CSS精灵的详细解析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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