18. 認識CSS Sprites

一、 何謂CSS Sprites

1. CSS Sprites就是將許多小圖併成一張大圖，並以CSS的定位方式來讓某圖示出現。
2. 例子：FCK編輯器的工具列、http://tw.yahoo.com/的小圖示。優點：
   • (1)  效能好！減少了網頁的http請求，從而大大的提高了頁面的性能！
   • (2)  就當前網絡速度而言，不大於200KB的單張圖片的所需載入時間基本是差不多的，載入10張2K的圖，比載入一張20K的圖，可能需要多好幾倍時間。也就是說一張大圖比許多小圖的存取來得快，加上瀏覽器快取，可以讓圖示的呈現更為順暢。
   • (3)  更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。

二、 CSS Sprites原理

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」、「background- repeat」、「background-position」的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。

三、 CSS Sprites相關工具

1. 可快速定位出某一個圖示：http://www.floweringmind.com/sprite-creator/index.php
2. 可將許多小圖進行合併：http://cn.spritegen.website-performance.org/

四、 CSS Sprites範例

方法一

<style type="text/css">
ul#menu{
  width:200px;
  height:297px;
  background:url(bg_studygroup.png) 0px 0px no-repeat;
  list-style:none;
  padding:0px;
  margin:0px;
  position:relative;
}
ul#menu li a{
  width:125px;
  height:40px;
  position:absolute;
  left:65px;
}
li.b1 a{top:87px;}
li.b2 a{top:135px;}
li.b3 a{top:183px;}
li.b4 a{top:233px;}
li.b1 a:hover{background:url(bg_studygroup.png) -265px -87px no-repeat;}
li.b2 a:hover{background:url(bg_studygroup.png) -265px -135px no-repeat;}
li.b3 a:hover{background:url(bg_studygroup.png) -265px -183px no-repeat;}
li.b4 a:hover{background:url(bg_studygroup.png) -265px -233px no-repeat;}
</style>
<ul id="menu">
  <li class="b1"><a title="年度計畫" href="#"></a></li>
  <li class="b2"><a title="書單" href="#"></a></li>
  <li class="b3"><a title="心得分享" href="#"></a></li>
  <li class="b4"><a title="佳作欣賞" href="#"></a></li>
</ul>

方法二

<style type="text/css">
ul#menu {width:200px; height: 212px; padding: 85px 0 0 0; background: url(bg_studygroup.png) no-repeat left top;}
ul#menu li { list-style: none;}
ul#menu li a { width: 200px; height: 48px; display: block;}
li.b1 a:hover { background: url(bg_studygroup.png) no-repeat -200px -85px;}
li.b2 a:hover { background: url(bg_studygroup.png) no-repeat -200px -133px;}
li.b3 a:hover { background: url(bg_studygroup.png) no-repeat -200px -181px;}
li.b4 a:hover { background: url(bg_studygroup.png) no-repeat -200px -229px;}
</style>

<ul id="menu">
  <li class="b1"><a title="年度計畫" href="#"></a></li>
  <li class="b2"><a title="書單" href="#"></a></li>
  <li class="b3"><a title="心得分享" href="#"></a></li>
  <li class="b4"><a title="佳作欣賞" href="#"></a></li>
</ul>