demoshop

之前就有介紹過 CSS Sprites 技巧的好處，但是都是紙上談兵，沒有實作，這次因為 demo 小鋪 4.0 的產生也就順便實作 CSS Sprites 技巧，在實作的過程中遇到一些設計上的困難點，所以本文章會以 demo小鋪 本身的實作經驗以及效果來介紹 CSS Sprites 實戰的技巧。

先看一下 demo 小鋪 在使用 CSS Sprites 優化之前的 Request 數 高達 91次

---

在使用 CSS Sprites 優化後降到 25 次

---

demo 這次刻意使用了兩種不同的 CSS Sprites 實作技巧來測試首先，準備一張要拿來切割的圖，圖片內包含了相當多的圖示

 

首先介紹頁面右上角的 RSS圖示和版本圖示的作法

這裡使用的方式是 利用 ul 來切，先來看看HTML

<ul id="topMenu">
<li id="Version"><a href="#" title="版權說明"></a></li>
<li id="RSS"><a href="http://feedproxy.google.com/demotc" target="_blank" title="RSS列表"></a></li>
</ul>

CSS

#topMenu
{
    background-position: -220px 0;
    width: 34px;
    height: 16px;
    background-image: url('//demoblog.blob.core.windows.net/blog/583/bookmarker.gif');
    position: relative;
    margin: 10px 0 0 0;
    padding: 0;
    float: right;
    left: -30px;
}
#topMenu li {margin: 0; padding: 0; list-style: none;position: absolute; top: 0;}
#topMenu li, #topMenu a {height: 16px; display: block;}
#Version {left: 0px; width: 16px;}
#RSS {left: 17px; width: 16px;}

首先在 topMenu 這個 DIV 內設定了 Bookmarker 這張背景圖利用 background-position 來指定圖片的切割位置，在製作圖片的時候刻意將 RSS圖示和版本圖示 放在一起所以只需要設定寬度就可以只顯示兩個圖示，而有部分的 CSS 設定是因為要符合版面，各位參考就好，重要的是 id為 Version 和 RSS 的兩個設定，因為內包含了連結，因此利用位移的方式推到適合的位置。

原本需要兩張圖的利用一張圖來呈現，節省了一次的 Request。

---

第二種實作方式使用內文的書籤按鈕來介紹

因為圖示大小都一樣，因此可以利用 DIV 再包 IMG 來實作。

HTML（重複性太高拿三個應該就看的懂了）

<div class="Sprites">
    <a href="#">
    <img src="//demoblog.blob.core.windows.net/blog/583/bookmarker.gif" />
    </a>
</div>
<div class="Sprites">
    <a href="#">
    <img src="//demoblog.blob.core.windows.net/blog/583/bookmarker.gif" style="margin-left: -17px" />
    </a>
</div>
<div class="Sprites">
    <a href="#">
    <img src="//demoblog.blob.core.windows.net/blog/583/bookmarker.gif" style="margin-left: -34px" />
    </a>
</div>

CSS

.Spritesicon
{
    overflow: hidden;
    width: 16px;
    height: 16px;
}

這種用法是先利用 DIV 來限制圖片顯示的大小，內容就可以直接使用習慣的圖片連結寫法，不同的是對於 img 標籤需要設定位移，因為圖片的排法是橫向，因此都只有使用 margin-left 來移動位置。

原本要使用12張圖片的又變成一張了，節省了11次的 Request。（不過其實圖片早已被快取了）

---

就如同上一篇文章【切割版面的技巧使用CSS Sprites】說的一樣，直接貼圖絕對會比實作 CSS Sprites簡單方便，而且這會注重 Request 數應該都是程式設計人員才會 Care ，美編設計人員是不可能會去在意，所以對於推動上是有相當的難度。

如果真的要實作 CSS Sprites 最大的難點應該就是調整圖片位移是不容易的，因此 demo 推薦你可以利用一些瀏覽器的工具來達到所見及所得的調整，調好以後再去修改CSS檔就可以很輕易的實現 CSS Sprites。

• IE8 「開發者工具」
• Firefox 「Firebug」
• chrome 「JavaScript控制台」