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; 來達到更精確的定位。