csssprites.png  

何謂CSS Sprite?

一般在做網頁時,都會加入許多圖示來讓整體網頁看起來更為活潑,不過你可能不知道,當一個頁面裡圖示越多,使用者就必須花更多時間來讀取這些零散的圖示,但透過CSS Sprites這項技術,可以幫你把所有圖示合併成一張大圖,在以CSS的定位方式來讓某圖示出現。

CSS Sprites Generator是一個幫你把圖片組合起來的網站工具,除了幫你組合起來之外,還會幫你算好位置並且顯示出來,讓你不必自己辛苦計算位置,因為CSS Sprites Generator會幫你搞定。

哪些知名網站使用這項技術呢?

最常見的Yahoo就是個很好的例子,我們常在Yahoo首頁看到網站的小圖示(如下圖)

2012-01-04_012803.jpg  

其實這些圖示點滑鼠右鍵 "另存背景" 到電腦之後,你會發現居然是像這樣一整張的圖示(如下圖)

 sprite_icos_111208.jpg

為何要使用CSS Sprite技術呢?有甚麼好處?

其實CSS Sprite技術不是甚麼新的技術,很早很早以前這項技術就廣為使用,使用CSS Sprite的目的是為了提升網頁頁面讀取的速度,可以有效降低圖片的HTTP請求數,尤其是你的網站有很多小圖示或圖片時,一張張上傳也很麻煩。

CSS Sprites Generator如何使用?

CSS Sprites Generator的頁面大致上非常簡單易懂,最初會有三個,如果不夠可以點 "Need More »" (每次增加三個)將你的圖片加進去,在點 Generate。

cssspritesresults.png  

上傳完成後,會出現合併完成的 PNG 檔以及範例頁面,下方也會有詳細的 CSS 設定教學,告訴你要設定多少的 background-position 才能讓該圖示顯示出來。

cssspritesupload.png  

官方網站

http://csssprites.com/

文章標籤

創作者介紹
創作者 英傑銳數位設計 的頭像
英傑銳數位設計

英傑銳網路數位設計

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()