在做網頁設計時，我們時常為了網站美感，在網頁中放入許多小圖(ex: 按鈕、文章標題背景、標籤) 。然而，當一個網頁有多個圖檔要載入時(ex: 30張以上)，瀏覽器在解析時，會不停地發送Http Requests，使得流暢度降低，也易造成client端負擔。
因此，利用CSS Sprites可減少瀏覽器對圖檔的Http Requests。此一技巧是將網頁中會用到的背景圖檔，全部集中放在一個圖片檔中，並利用 CSS 的 background-image 與 background-position 屬性將欲顯示的按鈕圖等部分顯示出來。如此，便可降低Http Requests。
例如以下語法：
img.next
{
width:43px;
height:44px;
background:url(img_navsprites.gif) -91px 3px;
}
便是將要顯示的next區塊，背景圖設定為：
- 寬度：43px
- 高度：44px
- 讀取的圖檔位置：img_navsprites.gif
- 位移量：將圖檔向左偏移91px，向下偏移0px後，開始讀取。(若是要將圖檔向右偏移30px，向上偏移20px，則設定為background:url(img_navsprites.gif) -91px 3px;有關偏移量的解釋，請見”CSS Tutorial – The background-position Property“一文)
註：詳細CSS Sprites的教學，可參考”W3School“
另外，筆者對這個還蠻有興趣的，就隨手找了幾篇文章做整理。
從保哥的文章指出，
IE瀏覽器跟某些個案有時候不支援background-image這種做法。
因此，我們可以換另一個方式來替代：(截自extending css spriting)
.menu-about { width: 106px; height: 29px; position: relative; top: 0; left: -293px; }
.menu-about img { position: absolute; clip: rect(0 399px 29px 293px); }
<div class=”menu-about”>
<img class=”transparent_png” src=”http://www.jennifersemtner.com/wp-content/uploads/2008/12/company-menu.png” alt=”About” title=”About Us” width=”611″ height=”39″ /></div>
其中，.menu-about img { position: absolute; clip: rect(0 399px 29px 293px); }
表示圖檔裁切位置邊界設定為：
- 上邊界為從上方往下數來第0px。
- 右邊界為從左方往右數來第399px。
- 下邊界為從上方往下數第29px。
- 左邊界為從左方往右數第293px。
註：詳細image clip屬性解說，可參見”The CSS Clip Property“一文。
而Tony 也對Image Sprites搭上jQuery實作遮罩，大家有興趣的話，不妨去看看這篇文章：「Image Sprites + jQuery 實作遮罩效果」
參考資料