css sprite哺壶，中文名稱為 css精靈屋吨，是一種通過減少web應用上HTTP請求的優(yōu)化方式。再次不談原理內(nèi)部怎么實現(xiàn)山宾，就看簡單的應用至扰。
舉個栗子，當你打開一個網(wǎng)站的時候资锰，頁面上會有各種小型的圖標敢课。以我前幾天做的一個代碼管理系統(tǒng)為例，這個系統(tǒng)上面有這些小圖：
圖片較小而且零碎绷杜。所以我就把它們用ps合并成了一張圖（當時做的比較精細直秆，現(xiàn)在就做個范例），如下：
制作這個合并圖的時候鞭盟，盡量減小圖片的大小圾结，例如長寬。
制作好之后齿诉，就要開始用在網(wǎng)頁上筝野。
原先沒有合并之前，在頁面中引入圖片粤剧，使用img標簽的src屬性歇竟。如最上面的圖，起碼要5抵恋、6個img標簽才能全部引用（本地代碼）焕议。像這樣：
但是現(xiàn)在合并為一張圖之后，img標簽就不需要了弧关，改成使用background-image:url();的形式盅安。css如下
這個的重點在于：
1. 你要知道原先小圖的尺寸。
2.在制作合并圖的時候梯醒，小圖在合并圖的什么位置要知道宽堆，因為在background-position屬性中要進行定位。（background-position的值可以是百分比茸习，可以是px畜隶，也可以是”left center“這種形式。）有時候制作合并圖需要非常精確的位置号胚，所以這是個精細活籽慢。
補充：
上面的制作太粗糙了。有時候會把圖做成一整行猫胁，或者一豎行箱亿，或者一個正方形。這樣有什么區(qū)別呢弃秆？
橫和豎的好處和壞處是一樣的届惋，可以寫死 background-position x|y 的其中一個值為 0髓帽，只需度量高度或?qū)挾纫痪S，挪動position的方式不一樣吧脑豹，直接切換看不出來郑藏，都一樣，如果緩慢的話看交互有關瘩欺。壞處是必盖，圖片的另一個維度的大小，以最大的那張圖為準俱饿，有可能浪費很多空間歌粥。方形，可以盡可能減少空間浪費拍埠，但要度量兩個坐標失驶。背景圖 sprite 動畫宜做成一維規(guī)劃，css3-animation 里的 step 函數(shù)可以很容易的設置械拍，比如一行50張圖的動畫突勇，設置 0 100% 后装盯，step(50) 即可坷虑。它的意思是，在規(guī)定時間內(nèi)分 50 步走完? 0 ～ 100％ 的變化范圍埂奈，每一步移動 1/50 的長度迄损，恰好遞進到下一張圖，如此循環(huán)账磺。
上文如有錯漏芹敌，請指出并批評。`·
