武林網(www.49028c.com)文章簡介：什么是CSS Sprites？ Sprite（精靈）這個詞在計算機圖形學中有它獨特的定義，由于游戲、視頻等畫質越來越高，必須有一種技術可以智能的處理材質和貼圖，并且要 同時保持畫面流暢。Sprite就是這樣一種技術，它將許多圖片組合到一個網格上，然后通過程序將每個網格的內容

什么是CSS Sprites？

“Sprite”（精靈）這個詞在計算機圖形學中有它獨特的定義，由于游戲、視頻等畫質越來越高，必須有一種技術可以智能的處理材質和貼圖，并且要 同時保持畫面流暢。“Sprite”就是這樣一種技術，它將許多圖片組合到一個網格上，然后通過程序將每個網格的內容定位到畫面上。

Sprite被定位到一副靜態圖片上，并且通過簡單的程序或硬件即可正確定位到畫面上，一幅幅圖片就像是被“變”出來的，他們并沒有單獨占用內存，所以被取名為“Sprite精靈”。

上圖是口袋妖怪的組合圖片，可以點這里欣賞更多。不是加載每個但以圖片

時間進行到2000年，Web設計向著精致、巧妙的方向發展。設計師們開始考慮使用非Javascript的方 式制作鼠標滑過、懸停菜單的效果，這時CSS Sprite應運而生，它基于同上文提到的游戲Sprite同樣的原理，并且使用CSS更容易控制，很快的流行開來。

2004年，Dave Shea 提出了一種使用CSS控制組合圖片的方案 ，將許過小的圖片組合在一起，使用css定義背景屬性，來控制圖片的顯示位置和方式。

當頁面加載時，不是加載每個單獨圖片，而是一次加載整個組合圖片。這是一個了不起的改進，它大大減少了HTTP請求的次數，減輕服務器壓力，同時縮短了懸停加載圖片所需要的時間延遲，使效果更流暢，不會停頓。

CSS Sprites用在哪里？

CSS Sprites可以用在很多場合，大型網站可以將許多單獨的圖片，以有機的方式組合起來，從而使其便于維護和更新。圖片之間通常會留出較大的空白，使 得圖片不會影響網頁的內容。但同時CSS Sprite大多使用于較固定的像素定位中，它的彈性較差，收到定位等因素的制約。所以，你需要在可維護性vs降低負載之間權衡利弊，選擇最適合你的項目 的方式。

下面是一些CSS Sprites的使用范例：

Xing

這個網站將一些按鈕、圖標以及LOGO做成了CSS Sprites：

Amazon

亞馬遜使用的大幅、整齊巧妙的CSS Sprites：

Apple

蘋果網站使用CSS Sprites來制作導航菜單的鼠標懸停效果：

YouTube

YouTube使用了一個2008像素高的CSS Sprites：

CNN

CNN使用了非常簡單謹慎的方案：

Digg

Digg的方案比較復雜：

Yahoo

Yahoo將他們漂亮的圖標等距離排布起來：

Google

Google使用了極其簡化的方案：

Dragon Interactive

一個豐富多彩的CSS Sprites方案：

TV1.rtp.pt

一個很大很酷的CSS Sprites方案

CSS Sprites常用來合并頻繁使用的圖形元素，如導航、LOGO、分割線、RSS圖標、按鈕等。通常它們不會作為網頁內容出現，因為涉及內容的圖片并不是每個頁面都一樣。

關于CSS Sprites的文章

CSS Sprites： Image Slicing’s Kiss of Death

中文版：樣式表貼圖定位（CSS Sprites）：圖像切片的死亡之吻

最權威的CSS Sprites介紹文章之一

CSS Sprites： What They Are， Why They’re Cool And How To Use Them

一篇圖文并茂的介紹文章

How Yahoo.com and AOL.com Improve Web Performance With CSS Sprites

介紹Yahoo、AOL等網站使用CSS Sprites降低服務器壓力的案例。

What Are CSS Sprites？

又一篇介紹文章

Sprite Optimization

Dave Shea的思考：是不是真的有必要簡歷復雜的大型CSS Sprites？答案是不！不要搞得太復雜，找到一個折中的方案才是正道。

Creating Easy and Useful CSS Sprites