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

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

“Sprite”(精靈)這個(gè)詞在計(jì)算機(jī)圖形學(xué)中有它獨(dú)特的定義，由于游戲、視頻等畫質(zhì)越來越高，必須有一種技術(shù)可以智能的處理材質(zhì)和貼圖，并且要 同時(shí)保持畫面流暢。“Sprite”就是這樣一種技術(shù)，它將許多圖片組合到一個(gè)網(wǎng)格上，然后通過程序?qū)⒚總€(gè)網(wǎng)格的內(nèi)容定位到畫面上。

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

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

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

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

當(dāng)頁(yè)面加載時(shí)，不是加載每個(gè)單獨(dú)圖片，而是一次加載整個(gè)組合圖片。這是一個(gè)了不起的改進(jìn)，它大大減少了HTTP請(qǐng)求的次數(shù)，減輕服務(wù)器壓力，同時(shí)縮短了懸停加載圖片所需要的時(shí)間延遲，使效果更流暢，不會(huì)停頓。

CSS Sprites可以用在很多場(chǎng)合，大型網(wǎng)站可以將許多單獨(dú)的圖片，以有機(jī)的方式組合起來，從而使其便于維護(hù)和更新。圖片之間通常會(huì)留出較大的空白，使 得圖片不會(huì)影響網(wǎng)頁(yè)的內(nèi)容。但同時(shí)CSS Sprite大多使用于較固定的像素定位中，它的彈性較差，收到定位等因素的制約。所以，你需要在可維護(hù)性vs降低負(fù)載之間權(quán)衡利弊，選擇最適合你的項(xiàng)目 的方式。

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

Xing

這個(gè)網(wǎng)站將一些按鈕、圖標(biāo)以及LOGO做成了CSS Sprites：

Amazon

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

Apple

蘋果網(wǎng)站使用CSS Sprites來制作導(dǎo)航菜單的鼠標(biāo)懸停效果：

YouTube

YouTube使用了一個(gè)2008像素高的CSS Sprites：

CNN
CNN使用了非常簡(jiǎn)單謹(jǐn)慎的方案：

Digg
Digg的方案比較復(fù)雜：

Yahoo
Yahoo將他們漂亮的圖標(biāo)等距離排布起來：

Google
Google使用了極其簡(jiǎn)化的方案：