2012年7月28日 星期六

[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 實作遮罩效果

沒有留言:

張貼留言