通常翻譯為“CSS圖像拼接”或“CSS地圖定位”。CSSSprites並不是壹項新技術。目前在web開發方面已經發展的比較成熟，在阿裏巴巴旗下子公司的網頁中隨處可見csssprites。但是，CSSSprites並不是金科玉律，但在很多情況下，它有壹定的優勢。最重要的是可以減輕服務器的負載，提高網頁的加載速度。隨著網頁設計向精致巧妙的方向發展，設計師們開始考慮使用非Javascript的方法制作鼠標懸停菜單，CSSSprite應運而生。
說白了，CSSSprites其實就是將壹個網頁中的壹些背景圖片整合成壹個圖片文件，然後利用CSS的“背景-圖片”、“背景-重復”、“背景-位置”的組合來定位背景。背景位置可以通過數字精確定位背景圖片的位置。
加載頁面時，不是加載每壹張單獨的圖片，而是壹次加載整個組合圖片。這是壹個很大的改進，大大減少了HTTP請求的數量，減輕了服務器的壓力，縮短了懸停加載圖片所需的時間延遲，效果更加流暢，不中斷。
CSSSprites應用程序
這方面，淘寶做的比較好。我以淘寶為例。
示例1:淘寶頻道頁面導航
渲染:
精靈圖:
例2:淘寶首頁
渲染:
精靈圖:
CSSSprites的優勢
CSSSprites為什麽突然火了，跟提升網站性能有關。顯然，這是它的壹大優點。
1.使用CSSSprites可以減少網頁的http請求，從而大大提高頁面的性能，這是CSSSprites的最大優勢，也是其廣泛傳播和應用的主要原因。
2.個人認為CSSSprites可以減少圖片的字節。我比較過很多次，三張圖片合並成1張圖片的字節數總是小於這三張圖片的字節數之和。
CSSSprites的缺點
CSSSprites這麽強大是真的，但是也有壹些不可忽視的缺點。
1.在進行圖片合並時，要有序合理地將多張圖片合並成壹張圖片，並留有足夠的空間，防止板塊中出現不必要的背景，否則可能會對圖片產生幹擾；這些都不錯，但是痛的是寬屏高分辨率屏幕下的自適應頁面。如果妳的畫面不夠寬，很容易破背景；
2.CSSSprites開發起來比較麻煩。妳得通過photoshop或者其他工具來測算出每個背景單元的確切位置。這是針線活，不難，但很繁瑣；不過有專家在網上開發了“CSSSprites樣式生成工具”，妳可以試試。
3.cssSprites維護起來很麻煩。精靈是壹把雙刃劍。如果頁面背景有細微的變化，壹般需要更改這個合並後的圖片，不需要更改的地方最好不要移動，以免更改更多的CSS。如果在原來的地方放不下，就只能(最好)添加圖片，這樣圖片的字節會增加，因為每次換圖都要對這個圖片進行內容的刪除或添加，有點繁瑣，當然在性能的口號下，這些都是可以克服的。
4.因為圖片的位置需要固定在壹個絕對值上，所以失去了居中等靈活性。
CSSSprites摘要
性能壓倒壹切。CSSSprites值得學習和應用，尤其是當頁面上有壹堆ico的時候。簡而言之，很多時候我們要權衡利弊，才能決定是否應用CSSSprites。為了保持兼容性和可維護性，在sprites圖片中的各個部分之間保持壹定的距離是壹個很好的做法。