[CSS] Image Sprites

在做網頁設計時，我們時常為了網站美感，在網頁中放入許多小圖(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 實作遮罩效果」

參考資料

1. W3School: CSS Image Sprites
2. The Will Will Web: 使用 CSS Sprites 設計網頁但不用 background-image 的技巧
3. Jennifer Semter's Blog: extending css spriting
4. IW:The CSS Clip Property
5. Switchonthecode: CSS Tutorial - The background-position Property
6. Tony's Blog:Image Sprites + jQuery 實作遮罩效果