css sprite

1、CSSSprites簡介

CSSSprites在國內不少人叫css精靈，是一種網頁圖片應用處理方式。它容許你將一個頁面涉及到的全部零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像之前那樣一幅一幅地慢慢顯示出來了。對於當前網絡流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差很少的，因此無需顧忌這個問題。

加速的關鍵，不是下降重量，而是減小個數。傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算。客戶端每顯示一張圖片都會向服務器發送請求。因此，圖片越多請求次數越多，形成延遲的可能性也就越大。

2、CSSSprites原理

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。

3、CSSSprites優缺點

CSSSpritse優勢　摺疊

利用CSS Sprites能很好地減小了網頁的http請求，從而大大的提升了頁面的性能，這也是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由；

CSS Sprites能減小圖片的字節，曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和。

解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。

更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便。 　　

CSSSpritse缺點　摺疊

4、CSSSprites的使用

有幾篇關於CSS Sprites的文章，基本上把其原理和機制說明得很清楚。

What Are CSS Sprites?

How to create CSS sprites

Creating Rollover Effects with CSS Sprites

Building a Dynamic Banner with CSS Sprites

High Performance Web Sites中關於CSS Sprites的內容3.2. CSS Sprites

5、CSSSprite的例子

.bg_sprite{background-image:url(/整圖地址); background-repeat:no-repeat}

引用該類 .. 而後在元素中逐必定義背景座標 .. 如下爲關鍵屬性 ..

#ico1 {width:容器大小;height:容器高度;background-position:X座標 Y座標}

#ico2 {width:容器大小;height:容器高度;background-position:X座標 Y座標}

#ico3 {width:容器大小;height:容器高度;background-position:X座標 Y座標}

.nav {width:容器大小;height:容器高度;background-position:X座標 Y座標}

必需要限定容器大小符合背景圖元素位置 .. 另外 .. XY軸是相對於整張圖片的左上角來算的 .. 因此取值必定要算清楚

6、CSSSprites的問題

因爲IE6存在的background的flicker問題IE6/Win, background image on , cache=‘check every visit’: flicker!，有人針對此問題提出了解決方案Fast Rollovers Without Preload

關於IE6的flicker問題，fivesevensix上有一篇很不錯的研究文章Minimize Flickering CSS Background Images in IE6

另外：brunildo的CSS tests and experiments是關於css各類功能不錯的參考手冊和測試工具。