武林網(www.companysz.com)文章簡介：下面讓我們來了解一下這篇CSS Sprites(CSS圖像拼合技術)技巧、工具和教程集合吧。

今天網頁教學網將向大家推薦目前為止最全的CSS Sprites(CSS圖像拼合技術)技巧、工具和教程集合，該集合是有一位國外設計師收集整合，并由 oncoding翻譯成中文的，感謝他們的辛苦貢獻。CSS Sprites技術在國外并不是什么新技術，只不過近兩年(尤其08年開始)中國開始流行這個詞，大家也開始越來越關注CSS Sprites這個沒有標準中文翻譯的技術。CSS Sprites這個詞如果直譯的話是”CSS精靈”的意思，它顯然無法表達其技術的內涵。通常我們把它叫做CSS圖像拼合技術,當然還有人把CSS Sprites叫做”CSS貼圖定位”。無論怎么叫，它的技術核心是不變的，下面讓我們來了解一下這篇CSS Sprites(CSS圖像拼合技術)技巧、工具和教程集合吧。

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

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

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

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

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

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

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使用了極其簡化的方案：