CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖示和背景圖像合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。
基本介紹
- 中文名：CSS雪碧
- 外文名：css sprite
- 別稱：CSS精靈
- 實質：一種CSS圖像合併技術
原理,優點,不足,實用技巧,
原理
CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標籤變得更加複雜了，圖片是在CSS中定義，而非<img>標籤。
一個簡單的例子：
一個連結用CSS做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個狀態，a:link，a:hover，a:active。
一張圖片作出一個按鈕的三個狀態
一張圖片作出一個按鈕的三個狀態<a class="button" href="#">連結</a>
加入右側的圖片為：200px×65px的三個按鈕圖拼合而成的圖片button.png，從上到下一次為按鈕的普通、滑鼠滑過、滑鼠點擊的狀態。則可以使用CSS進行定義。
a {
display:block; width:200px; height:65px; line-height:65px; /*定義狀態*/
text-indent:-2015px; /*隱藏文字*/
background-image:url(button.png); /*定義背景圖片*/
background-position:0 0; /*定義連結的普通狀態，此時圖像顯示的是頂上的部分*/}
a:hover {background-position:0 -66px; /*定義連結的滑過狀態，此時顯示的為中間部分，向下取負值*/}
a:active {background-position:0 -132px; /*定義連結的普通狀態，此時顯示的是底部的部分，向下取負值*/}
初學的朋友可以試試效果。
而更多的CSS雪碧，圖片更複雜，背景定位更精確。可能會用到大量的數值，如：background:url(nav.png) -180px 24pxno-repeat; 來達到更精確的定位。
優點
減少載入網頁圖片時對伺服器的請求次數
可以合併多數背景圖片和小圖示，方便在任何位置使用，這樣不同位置的請求只需要調用一個圖片，從而減少對伺服器的請求次數，降低伺服器壓力，同時提高了頁面的載入速度，節約伺服器的流量。
提高頁面的載入速度
sprite 技術的其中一個好處是圖片的載入時間(在有許多 sprite 時，單張圖片的載入時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小於所有圖片拼合前的大小。單張的 GIF 只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
減少滑鼠滑過的一些bug
IE6不會主動預載入滑鼠滑過即a:hover中的背景圖片，所以，如果使用多張圖片，滑鼠滑過會出現閃白的現象。使用CSS雪碧，由於一張圖片即可，所以不會出現這種現象。
不足
CSS雪碧的最大問題是記憶體使用
除非這個雪碧圖片是被非常小心的組織，你就會最終使用大量的無用的空白。一個例子是來自於WHIT TV的網站。注意這是一個1299×15,000像素的PNG圖片。它也被壓縮的很好——實際下載大小只有大概26K — 但是瀏覽器並不會渲染壓縮後的圖片數據。當這個圖片被下載並被解壓縮之後，它將占用差不多75MB的記憶體 (1299 * 15000 * 4)。如果這個圖片並沒有使用alpha透明，它將會被最佳化至1299 * 15000 * 3，但是要在損失渲染速度的情況下。即使那樣，我們也會討論55MB。這張圖片的大部分其實就是空白，那裡什麼都沒有，沒沒有任何有用的內容。只是載入 WHIT主頁 就會導致你的瀏覽器的記憶體占用上升到至少75+MB，僅僅是因為那一張圖片。（PS:遺憾的是，該網站最近已經改版，文中提到的圖片已經不存在了）
影響瀏覽器的縮放功能
如果一個使用CSS雪碧的頁面使用一些瀏覽器提供的整頁縮放功能縮放了，瀏覽器就需要做一些額外的工作來糾正這些圖片邊緣的行為——基本上來說，是為了避免雪碧中相鄰的圖片被“露進來”。這對於小圖片沒有什麼問題，但是對於大圖片會是一個性能下降。
拼圖維護比較麻煩
拼合這么多圖片，需要耐心。同時還要時刻思考如何在使用這個圖片是不會產生相互的影響。將又瘦又高的圖片和又寬又矮的圖片放到一起時，不容易操作。如果要修改雪碧中的一個圖片，你就要修改整張圖片，這無疑會增大工作量。
使CSS的編寫變得困難
如果CSS雪碧足夠複雜，則大大增加了CSS的代碼量和難度，讓維護和修改變得困難起來。
CSS 雪碧調用的圖片不能被列印
CSS 雪碧調用的圖片不能被列印，除非在@media中特別添加 print聲明。
錯誤得使用 Sprites 影響可訪問性
一些剛入門的開發人員會為了節省 HTTP 請求數(這是使用 CSS Sprite 一直強調的好處)而把所有的圖片都當背景圖片來處理 – 甚至是那些傳達重要信息的圖片。結果會導致一個缺乏可訪問性的網站，也會降低 HTML 中 title 和 alt 的潛在益處。
因此，CSS sprite 本身沒錯，而且也不會引發可訪問性問題(事實上，正確得使用會提高可訪問性)。但是不分對錯得過度使用 sprite 會阻礙具有可訪問性和生產率方面的網頁建設進程。
實用技巧
不要等到你完成切片之後才開始sprite
如果你邊切圖邊寫CSS，然後等你完成了整個網站之後再來拼接這些圖片到一個Sprite中，你就不得不完全重寫你的CSS，你也必須要花費很多的時間來用PS拼接大量的圖片——這是件令人倍感糾結的事情。但是如果邊切圖邊整合，就會比較容易些。
把圖片放到它要顯示的地方的相對的地方
這個小技巧貌似比較難理解。我直到創建一個比較大的sprite的時候才理解到這一點。比如，如果我們希望一個圖片出現在一個元素的左側：將那個圖片放到sprite圖片的右邊(本文開始的那個sprite圖片)。這樣的話，當你通過CSS移動背景圖片的位置的時候，基本上不可能有其它的小圖片意外的出現在它的附近。使用Sprite的時候常常遇到的一個問題是圖片會出現在它不該出現的位置。
定位時避免使用bottom或right等
當使用CSS sprite的時候，只用background-position: bottom -300px或background-position: right -200px;非常容易。這剛開始的時候是可行的，但是問題是，當你在寬度上或高度上擴展相關sprite圖片的時候，原先設定的位置可能是錯的，因為那個圖片已經不再Sprite圖片的底部或右部了。使用確切的位置來避免這個問題。
給每個圖片足夠的空間
就像你在本文頂部的實例圖片看到的那樣，那些小圖片都被預留了足夠的空間。為什麼不把他們塞到一塊來讓sprite圖片更小呢？ 因為使用這些圖片的元素通常都會有大量的內容而且可能會需要擴展的間距，以至於其它圖片不會意外出現。
不用擔心Sprite圖片的像素大小
如果你的網站經過良好的設計，那么你將會有一大堆的圖片來整合進到sprite裡面，這樣你就需要一個非常大的sprite來恰當的放置這些圖片。這是很不錯的。sprite里的空白不會占用太多的檔案大小。國外某購物網站上使用的Sprite圖片有1,000px×2,000 px那么大，但是圖片的大小僅僅16.7kb!
