摘要：CSS Sprites中文翻譯為“CSS圖像拼合”或“CSS貼圖定位”，是將多個小圖片(例如網頁中的背景、按鈕、圖標等)集中在一張圖片上，再利用CSS樣式中的定位技術令其在網頁中能夠在準確的位置上分別顯示出來。當網頁被加載時，不用加載一個個單獨的小圖片，而是一次性加載整個Sprites圖片，網頁顯示效果將更加流暢，同時也為了減少用戶瀏覽網頁時對服務器的HTTP請求數，減輕服務器的負載，提高網頁加載速度，達到優化網站的目的。
關鍵詞：CSS Sprites,CSS圖像拼合,CSS貼圖定位,網頁,定位
中圖分類號：TP393文獻標識碼：A文章編號：1009-3044(2011)20-4964-02
隨著近幾年網頁設計技術的不斷發展，頁面的設計逐漸變得越來越精致和巧妙，設計師們開始考慮使用非Javascript的方式來制作一些鼠標經過、懸停菜單的效果，這時CSS SpriteS技術應運而生，它主要是將多幅小圖片合成在一張圖片上，并且使用CSS樣式表控制其定位，CSS Sprites技術能有效的減少服務器請求次數，優化網頁加載速度，因此在許多大型網站中應用得非常廣泛。
1 CSS Sprites簡介
目前CSS Sprites被廣泛用于網頁設計當中，技術也發展得比較成熟，在淘寶、新浪、騰訊等許多知名網站的網頁中均使用了CSS Sprites定位技術。
在傳統的網頁設計方法中，往往利用Fireworks或Photoshop等圖像處理軟件直接對網頁設計稿進行切圖，直接轉變為table結構布局的html文檔。切圖時講究精細，一般要求圖片尺寸越小越好，實際上尺寸大小無所謂，計算機統一都按byte計算。由于網頁html文檔在客戶端顯示的時候是按順序加載的，加載一個文件將會產生一次http請求數，如果網頁中的圖片過多，特別是有許多小圖標、按鈕圖片等，將會影響到頁面加載的速度。
2004年，著名的“CSS禪意花園”網站創始人，來自加拿大的Web設計師Dave Shea就提出了一種使用CSS控制組合圖片的方案CSS Sprites，將許多小的圖片組合在一起，使用css定義背景屬性，來控制圖片的顯示位置和方式。這種技術減少了網頁中圖片的個數，加速網站顯示的速度，在一定程度上起到了優化網站性能的作用。也有人認為采用CSS Sprites技術后，整合過的圖片尺寸會變大，不利于圖片的快速顯示，不過對于目前的網速而言，小于200KB的單張圖片的所需加載時間基本是差不多的，因此無需過于擔心這個問題。
2 使用CSS Sprites技術進行網頁背景定位的原理
使用CSS Sprites技術時，首先應當采用Fireworks或Photoshop等圖像處理軟件將網頁中一些按鈕或小圖標等整合到一張背景圖片文件中，圖片格式可以采用gif、jpg或png-8位格式。如果是顏色值在256色內的小圖片，而且底色透明，可以采用png-8位格式; 如果圖片是動態的，可以采用gif格式; 如果要合并背景類的大圖片，可采用jpg格式。
接下來，利用CSS的“background-image”、“background- repeat”、“background-position”等屬性進行背景定位，“background-image”屬性表示背景圖的URL路徑;“background- repeat”屬性表示背景圖是否平鋪;“background-position”屬性則代表用數值精確的定位出背景圖片的位置。
例如：采用Fireworks將3個icon圖標集成在了一張sprites.png中，該png圖尺寸為125*48，每個icon的尺寸都是41*48，間隔是1px，它們在png中的坐標分別是(0，0)(42，0)(84，0)。
網頁中使用了三個div，分別命名為item1、item2、item3，html代碼如下:
用于定位的CSS代碼如下：
#item1 {background-image: url(sprites.png);
background-repeat: no-repeat;
background-position: 0px 0px;
height: 48px;
width: 41px;}
#item2 {background-image: url(sprites.png);
background-repeat: no-repeat;
background-position: -42px 0px;
height: 48px;
width: 41px;}
#item3 {background-image: url(sprites.png);
background-repeat: no-repeat;
background-position: -84px 0px;
height: 48px;
width: 41px;}
網頁最終效果如圖2所示。
background-position(圖像背景位置)這個屬性是CSS中非常重要的屬性。使用這個屬性，你可以定義塊級元素的背景圖像位置，可以使用%百分比或px像素為單位來定義圖像開始的位置，也可以使用關鍵字：left/center/right和top/center/bottom，background-position的前一個值表示水平方向的定位，后一個值表示垂直方向的定位。
3 CSS Sprites技術的應用范圍
一般來說，CSS Sprites技術可以應用在以下幾種情況中：
1
) 減少圖片數量。我們在瀏覽網頁的時候，在瀏覽器狀態欄中經常可以看到“(剩下X項)正在下載圖片……”這樣的信息，圖片數量越多，網頁加載的速度越慢。利用CSS Sprites技術，將多個同類型的小圖片綜合在一張圖片里，減少圖片的數量，同時可以令圖標的總容量變小，比如集合了9個圖標的一幅Sprites圖片的size，會比這9個單張圖標的size總和要小，這是CSS Sprites的主要作用，以盡量減少圖片數量為前提，只要連接服務器一次，就可以將所有圖標加載下來。
2) 預先加載鼠標經過時切換圖片。在網頁中經常會用到鼠標經過時，或鼠標按下時切換到不同圖片的效果，這時經常會出現延遲或圖片無法顯示的情況，這主要是因為瀏覽器為了盡快地顯示頁面，一般只是將打開頁面時用到的圖片下載到本地，而鼠標經過圖片往往是等到用戶將鼠標移動到按鈕時，圖片才開始下載。如果把多種狀態的圖合并成一張圖，再使用CSS Sprites技術模擬動態切換效果，效果將會更加流暢。
3) 自適應寬度的背景圖，也叫滑動門。如果頁面中存在平鋪背景圖的效果，并且帶有邊角，可以在一張圖片中結合平鋪的背景和邊角，再利用CSS背景定位實現。例如圓角矩形效果的實現，可以在Sprites圖中單獨繪制出上下左右四個頂角圓角的效果，中間的背景只要做一小塊矩形即可，利用CSS平鋪實現來填充整個DIV，具體寬度高度可以自定義，而四個圓角的位置則在網頁中用CSS來定位，這樣做可以簡化html文檔的結構。
4 運用CSS Sprites技術時可能遇到的問題
雖然CSS Sprites技術非常強大，但使用過程中也存在一些不可忽視的問題：
1) 在圖片合并的時候，需要把多張圖片有序的合理的合并成一張圖片，要把握好圖標之間的空隙，防止網頁中出現不必要的背景。如果在寬屏，高分辨率的顯示器下，圖片如果不夠寬，很容易出現背景斷裂的情況。
2) 在開發和設計圖片的時候，需要通過Fireworks或Photoshop等圖像處理軟件測量計算每一個背景單元的精確位置，雖然沒什么難度，但是很繁瑣，不過網上已經出現了“CSS Sprites 樣式生成工具”，甚至有些網站具有在線轉換的功能，能夠快速的根據Sprites圖片計算出CSS樣式代碼。
3) 在維護和管理圖片的時候比較麻煩，如果頁面背景有少許改動，比如只是更換一個小圖標，那么就要修改整張合并的大圖片，如果要改變一個圖標的尺寸，很可能需要重新計算圖片的位置，這將會非常繁瑣，一般只好在別的位置再添加一個圖標。
4) 由于CSS Sprites大多使用于較固定的像素定位中，彈性較差，受到定位等因素的制約，無法做到像center相對定位效果一樣靈活。
5 小結
CSS Sprites常用來合并頻繁使用的圖形元素，如區塊背景、導航條、icon圖標、網站LOGO、分割線、button按鈕等，以方便網頁中CSS調用。整合Sprites圖片時讓圖標盡量排列得有規律，這樣容易定位和維護。將背景顏色一致的圖標放置在一起，如果背景顏色不一樣, 最好分為兩個或多個圖片放置。最好將相同欄目的圖標放置在一起，可以節省一些 CSS 代碼。另外，不要將尺寸較大的圖整合在一起，因為這樣的圖片size會比較大，加載需要一定的時間，而大部分用戶都不會耐心地等待頁面下載完畢再進行閱讀。
參考文獻：
[1] 曾順. 精通CSS+DIV網頁樣式與布局[M].北京:人民郵電出版社,2010.
[2] 杜現朝, 許建平, 龍懷冰. Web標準中的定位原理及其應用[J].計算機工程與設計,2008(23).
[3] 張軍. CSS Sprites在Web開發中的應用[J].考試周刊,2010(31).
注：本文中所涉及到的圖表、注解、公式等內容請以PDF格式閱讀原文
