demoshop

demo, trying to be the best_

CSS Sprites 技巧實戰

  • 2010-01-24
  • 7792
  • 0

之前就有介紹過 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為 VersionRSS 的兩個設定,因為內包含了連結,因此利用位移的方式推到適合的位置。

原本需要兩張圖的利用一張圖來呈現,節省了一次的 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控制台」

回應討論