HTML5+CSS3基礎之CSS Sprites（CSS精靈）

時間：2023-07-06 15:30:02 | 來源：網(wǎng)站運營

時間：2023-07-06 15:30:02 來源：網(wǎng)站運營

HTML5+CSS3基礎之CSS Sprites（CSS精靈）：

CSS Sprites介紹

Css sprites 可翻譯為css精靈，也有人翻譯為css雪碧，因為sprite也有雪碧的意思。在國內(nèi)習慣成他為圖片整合技術，說起來這個稱呼也是滿貼切的，因為他確實是多張圖片整合為一整圖片的技術，為什么要把多張圖整合到一張上呢，這樣做有什么好處呢？因為這樣的話，當您訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。

CSS Sprites原理

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

CSS Sprites優(yōu)缺點

CSS Sprites 的優(yōu)點：

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

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

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

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




CSS Sprites 的缺點：

1、在應用精靈圖片的時候，你需要考慮當前盒子會不會漏出其他的背景圖，這個還好，比較頭疼的是，頁面自適應時，背景圖的位置就沒那么容易掌控了。

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

3、使用精靈圖的頁面后期維護帶來了繁瑣，因為他是多張圖在一張圖上，牽一發(fā)而動全身的感覺，你改變一張背景圖，如果大小發(fā)生變化，那么其他的你就得動，只要你動了，那么所有的背景定位都將需要改變，所以一旦需要更改背景圖的話，輕易不要改變其他圖片的位置，原位能放下就在原位改，放不下就在下面添加。

CSS Sprites的使用

1、如果你的精靈圖是整整齊齊的一豎排或者一橫排，并且每一個背景圖的尺寸都是一致的，那么你就幸運了，因為這樣我們就不需要對每一個被那個圖的位置都進行測量了，比如這張背景圖：

他實現(xiàn)的頁面效果就是和它等尺寸的一個小導航：

其中灰色為當前狀態(tài)，橘色為鼠標以上的狀態(tài)，這個精靈圖就是個合理整齊的精靈圖，代碼書寫起來也會方便很多，至少不需要每一個都進行測量，代碼如下：

基本結構：

相關樣式：

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

這張圖不僅橫向排列，而且周圍多出很多空余的區(qū)域，這就會給前端帶來很多的麻煩，這張圖要實現(xiàn)的目標效果是：

看似很簡單的頁面，可是代碼卻比正常多出很多：

基本結構：

里面不得不使用一個span來裝背景圖；

相關樣式：

單獨對span進行定義樣式。

3、精靈圖也會經(jīng)常和滑動門一起使用，這個時候你就需要注意了，同時編輯兩個圖片的位置關系，看下面頁面效果：

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

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

基本結構：

相關樣式：

鼠標移上要同時改變兩個標簽的背景圖片。

總結：在精靈圖的使用過程中，精靈圖做的標不標準就決定于頁面書寫的難易程度，所以說一個整齊規(guī)范的精靈圖使用起來也是很舒服的。

這里再給大家陳列幾張常見的精靈圖：

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

這也是個不錯的精靈圖，使用起來方便快捷。

第二組是名鞋庫里面的精靈圖：

第一張使用起來就要比第二張方便的多。

還有這些：

這些都是精靈圖，就是用來書寫鼠標以上的酷炫效果的，精靈圖不見得非得弄很多很多的圖，太多了反而會增加負擔，增加書寫頁面的負擔，增加頁面加載的負擔。