:::

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>
 


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

23人線上 (12人在瀏覽線上書籍)

會員: 2

訪客: 21

tad, trueeric,

更多…