CSS Sprites 的運作概念
設計師直接將整個網頁會用到的圖片，組合成 1 張大圖片，當網友開啟網頁時，就將大圖片整個傳至網友的電腦中，再透過 CSS 的圖形大小設定、background 等方式，將大圖片中的每個小圖片獨立出來，填入網頁中要呈現的位置，網站伺服器僅需將 1 張大圖片傳送給網友，其他圖片處理的工作都交由網友的電腦完成，優點是節省伺服器的工作量也相對的減少成本，缺點則是設計師需要花更多時間設計。
CSS Sprites 範例
假設現在有一張完整的圖片如下，圖片名稱就叫做 BigImg.gif。
接著要透過 CSS Sprites 的技術，將三個含有英文字母的藍色方塊換位置，由原本的 ABC 改成 CBA 的排列方式，以下範例程式碼分為 CSS 的圖片處理以及 HTML img 的呈現位置規劃。
<style>
#Img1{
width:51px;
height:50px;
background:url(BigImg.gif) -102px 0px;
}
#Img2{
width:51px;
height:50px;
background:url(BigImg.gif) -51px 0px;
}
#Img3{
width:51px;
height:50px;
background:url(BigImg.gif) 0px 0px;
}
</style>
<img id="Img1" src="替代圖片.png">
<img id="Img2" src="替代圖片.png">
<img id="Img3" src="替代圖片.png">
呈現結果如#Img1{
width:51px;
height:50px;
background:url(BigImg.gif) -102px 0px;
}
#Img2{
width:51px;
height:50px;
background:url(BigImg.gif) -51px 0px;
}
#Img3{
width:51px;
height:50px;
background:url(BigImg.gif) 0px 0px;
}
</style>
<img id="Img1" src="替代圖片.png">
<img id="Img2" src="替代圖片.png">
<img id="Img3" src="替代圖片.png">
範例中共有三個 img 標籤，由於 src 不可以是空白，所以我們用了一個寬與高都是 1px 的透明圖片「替代圖片.png」放到 src 中，這個替代圖片只是用來占位子，因為他會被 BigImg 所拆分出來的部分所取代，CSS Sprites 的重點在於 background 的語法，url 導入大圖片，接著是靠左邊的距離以及靠上方的距離，例如 Img1 寫成「background:url(BigImg.gif) -102px 0px;」代表要從大圖片中，靠左邊 -102px 以及靠上方 0px 的位置開始計算，至於寬度與高度則是 51px 與 50px 的矩形，這樣會取得標有英文字母 C 的藍色方塊，接著就把這個藍色方塊放在網頁中 id=img1 的圖片位置，同樣手法取得另外兩個小圖，並放置於 id=Img2 以及 id=Img3 的位置，三個英文字母位置即更換完成。
備註、以上範例的 BigImg.gif、替代圖片.png 均為示意，範例的用意只是呈現如何透過 CSS Sprites 的技巧，從一張大圖片中，取得所需要的部分，並且放到該呈現圖片的位置，實際應用在一個網頁設計規劃中，還是要由美工設計與程式設計兩個部分的搭配，才能完成這樣的呈現方式，雖然在設計過程需要花上更多的時間，但相對的網站流量越龐大，運用 CSS Sprites 所節省的伺服器工作量就越可觀。
延伸閱讀