css sprite
css sprite
CSSSprites在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。
速鍵，降低質量，減。傳統切圖講究精細，圖片規越越，量越越，規謂，計算統按計算。客戶端顯示圖片伺服器送請求。，圖片越請求越，造延遲越。
網頁背景圖片整合圖片件，CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。
. 減網頁請求，提頁， 優，廣泛傳播；
2.CSS Sprites能減少圖片的位元組，曾經比較過多次3張圖片合併成1張圖片的位元組總是小於這3張圖片的位元組總和。
3.解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的製作效率。
4.更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。
誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點，如下：
1.在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景；這些還好，最痛苦的是在寬屏，高解析度的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
2.CSS Sprites在開發的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什麼難度，但是很繁瑣；
3.CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的位元組就增加了，還要改動css。
4.CSS Sprites非常值得學習和應用，特別是頁面有一堆icon（圖標）。總之很多時候大家要權衡一下利弊，再決定是不是應用CSS Sprites。
有幾篇關於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
.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軸是相對於整張圖片的左上角來算的 .. 所以取值一定要算清楚。
由於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各種功能不錯的參考手冊和測試工具。
基本信息
- 定義
- 一種網頁圖片應用處理方式