提升網站效能的 CSS Sprites

睡蓮 標籤

　　近來在為池水間進行網站優化，將XHTML和CSS代碼改良，其中CSS就首次使用了CSS Sprites技術，以提升網站效能。

　　什麼是CSS Sprites？就是將多個圖片匯集到一個大圖片上，然後在CSS裡將每個使用不同背景圖路徑全部劃一改為集成圖片路徑，並給每個背景圖定位。

　　例如下面的無序列表，每一個 li 標籤分別用五個不同背景圖：

<ul><li class="image1"> image1 背景 </li>
<li class="image2"> image2 背景 </li>
<li class="image3"> image3 背景 </li>
<li class="image4"> image4 背景 </li>
<li class="image5"> image5 背景 </li>
</ul>

在CSS裡給每個 li 設定不同背景圖片路徑：

.images1 {background: url(image1.png) no-repeat;}
.images2 {background: url(image2.png) no-repeat;}
.images3 {background: url(image3.png) no-repeat;}
.images4 {background: url(image4.png) no-repeat;}
.images5 {background: url(image5.png) no-repeat;}

　　上面就用了五個不同的路徑，如將五個圖片匯集到一個圖片，路徑就只要劃一用同一個便可以了。這樣一來當網頁載入圖片時只需一次載入集成圖片，然後依據先前背景圖的定位而顯示出不同背景圖。

圖片匯集

圖片匯集

定位

當匯集到一個圖片之後，如何為每個 li 標籤分別指定 5to1_image.png 裡面的不同背景圖呢？

下圖的每一個橘框所示為每個 li 要用的背景：

分配圖片

在為每個不同背景圖定位之前，須先給每個 li 標籤指定寬和高也就是100 px * 30px，如此定位才會準確。

上面的image1 ，其灰色背景位處在 5to1_image.png 裡的最上面，也就是最容易定位的地方：

.images1 {background: url(5to1_image.png) no-repeat 0 0;}

上面代碼中紅色的0為x，藍色的0為y；x為水平位置，y為垂直位置。

由於背景圖定位的預設值皆為0的關係，上面的代碼可以省略成如下：

.images1 {background: url(5to1_image.png) no-repeat;}

好了，接下來給 image2 定位，其棕色背景位處在灰色的下面，見下圖：

圖片定位

將 image2 的棕背景向上提升一格( 30px )至橘框位置，而水平位置維持不變：

.images2 {background: url(5to1_image.png) no-repeat 0 -30px;}

接著將位處在image 2 下面的 image 3 ，向上提升兩格至橘框，兩格就是60px。其他的image 4 和 image 5 則餘類推：

.images3 {background: url(5to1_image.png) no-repeat 0 -60px;}
.images4 {background: url(5to1_image.png) no-repeat 0 -90px;}
.images5 {background: url(5to1_image.png) no-repeat 0 -120px;}

CSS Sprites 就是這樣用法，除了上面的多圖匯集成一圖之外，CSS Sprites亦可取代以往在photoshop繪製好設計圖後需作切圖的舊模式，利用CSS Sprites技術，便可不需切圖而直接使用了。

【2021年補記】上文發表於09年，是 CSS2.1 的年代，當時的 CSS3 標準，W3C尚未全部制訂完畢。在現今的年代，以 CSS3 去寫的話，會是下面的例子：

li[class^="image"] {background: url(image1.png) no-repeat;}
.images2 {background-position:0 -30px;}
.images3 {background-position:0 -60px}
.images4 {background-position:0 -90px}
.images5 {background-position:0 -120px}