提升網站效能的 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}