
一般在做網頁時,都會加入許多圖示來讓整體網頁看起來更為活潑,不過你可能不知道,當一個頁面裡圖示越多,使用者就必須花更多時間來讀取這些零散的圖示,但透過CSS Sprites這項技術,可以幫你把所有圖示合併成一張大圖,在以CSS的定位方式來讓某圖示出現。
CSS Sprites Generator是一個幫你把圖片組合起來的網站工具,除了幫你組合起來之外,還會幫你算好位置並且顯示出來,讓你不必自己辛苦計算位置,因為CSS Sprites Generator會幫你搞定。
在介紹之前先來展示一個範例,讓大家瞭解這個功能到底是做什麼的,首先拿Yahoo!奇摩的網站來給大家看看背景圖。

▲ 圖中紅色框部分的圖示其實都是同一張圖片,當然不只這些...還有更多。

其實Google的首頁也有用CSS Sprite,只是數量上比較沒那麼明顯,使用CSS Sprite的目的是為了提升網頁頁面讀取的速度,可以有效降低圖片的HTTP請求數,尤其是你的網站有很多小圖示或圖片時,一張張上傳也很麻煩。
使用教學
CSS Sprites Generator的頁面大致上非常簡單易懂,最初會有三個,如果不夠可以點 "Need More »" (每次增加三個)將你的圖片加進去,在點 Generate。

上傳完成後,會出現合併完成的 PNG 檔以及範例頁面,下方也會有詳細的 CSS 設定教學,告訴你要設定多少的
background-position
才能讓該圖示顯示出來。
補充 …
CSS Sprite Generator | Project Fondue - http://spritegen.website-performance.org/ (可用壓縮檔)
這是類似的網頁服務,可以用壓縮檔的形式上傳比較大量的圖片,就不另外做介紹。
0 comments:
Post a Comment