摘要：CSS Sprites中文翻譯為“CSS圖像拼合”或“CSS貼圖定位”，是將多個(gè)小圖片(例如網(wǎng)頁(yè)中的背景、按鈕、圖標(biāo)等)集中在一張圖片上，再利用CSS樣式中的定位技術(shù)令其在網(wǎng)頁(yè)中能夠在準(zhǔn)確的位置上分別顯示出來(lái)。當(dāng)網(wǎng)頁(yè)被加載時(shí)，不用加載一個(gè)個(gè)單獨(dú)的小圖片，而是一次性加載整個(gè)Sprites圖片，網(wǎng)頁(yè)顯示效果將更加流暢，同時(shí)也為了減少用戶(hù)瀏覽網(wǎng)頁(yè)時(shí)對(duì)服務(wù)器的HTTP請(qǐng)求數(shù)，減輕服務(wù)器的負(fù)載，提高網(wǎng)頁(yè)加載速度，達(dá)到優(yōu)化網(wǎng)站的目的。

　　關(guān)鍵詞：CSS Sprites,CSS圖像拼合,CSS貼圖定位,網(wǎng)頁(yè),定位

　　中圖分類(lèi)號(hào)：TP393文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1009-3044(2011)20-4964-02

　　隨著近幾年網(wǎng)頁(yè)設(shè)計(jì)技術(shù)的不斷發(fā)展，頁(yè)面的設(shè)計(jì)逐漸變得越來(lái)越精致和巧妙，設(shè)計(jì)師們開(kāi)始考慮使用非Javascript的方式來(lái)制作一些鼠標(biāo)經(jīng)過(guò)、懸停菜單的效果，這時(shí)CSS SpriteS技術(shù)應(yīng)運(yùn)而生，它主要是將多幅小圖片合成在一張圖片上，并且使用CSS樣式表控制其定位，CSS Sprites技術(shù)能有效的減少服務(wù)器請(qǐng)求次數(shù)，優(yōu)化網(wǎng)頁(yè)加載速度，因此在許多大型網(wǎng)站中應(yīng)用得非常廣泛。

　　1 CSS Sprites簡(jiǎn)介

　　目前CSS Sprites被廣泛用于網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中，技術(shù)也發(fā)展得比較成熟，在淘寶、新浪、騰訊等許多知名網(wǎng)站的網(wǎng)頁(yè)中均使用了CSS Sprites定位技術(shù)。

　　在傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)方法中，往往利用Fireworks或Photoshop等圖像處理軟件直接對(duì)網(wǎng)頁(yè)設(shè)計(jì)稿進(jìn)行切圖，直接轉(zhuǎn)變?yōu)閠able結(jié)構(gòu)布局的html文檔。切圖時(shí)講究精細(xì)，一般要求圖片尺寸越小越好，實(shí)際上尺寸大小無(wú)所謂，計(jì)算機(jī)統(tǒng)一都按byte計(jì)算。由于網(wǎng)頁(yè)html文檔在客戶(hù)端顯示的時(shí)候是按順序加載的，加載一個(gè)文件將會(huì)產(chǎn)生一次http請(qǐng)求數(shù)，如果網(wǎng)頁(yè)中的圖片過(guò)多，特別是有許多小圖標(biāo)、按鈕圖片等，將會(huì)影響到頁(yè)面加載的速度。

　　2004年，著名的“CSS禪意花園”網(wǎng)站創(chuàng)始人，來(lái)自加拿大的Web設(shè)計(jì)師Dave Shea就提出了一種使用CSS控制組合圖片的方案CSS Sprites，將許多小的圖片組合在一起，使用css定義背景屬性，來(lái)控制圖片的顯示位置和方式。這種技術(shù)減少了網(wǎng)頁(yè)中圖片的個(gè)數(shù)，加速網(wǎng)站顯示的速度，在一定程度上起到了優(yōu)化網(wǎng)站性能的作用。也有人認(rèn)為采用CSS Sprites技術(shù)后，整合過(guò)的圖片尺寸會(huì)變大，不利于圖片的快速顯示，不過(guò)對(duì)于目前的網(wǎng)速而言，小于200KB的單張圖片的所需加載時(shí)間基本是差不多的，因此無(wú)需過(guò)于擔(dān)心這個(gè)問(wèn)題。

　　2 使用CSS Sprites技術(shù)進(jìn)行網(wǎng)頁(yè)背景定位的原理

　　使用CSS Sprites技術(shù)時(shí)，首先應(yīng)當(dāng)采用Fireworks或Photoshop等圖像處理軟件將網(wǎng)頁(yè)中一些按鈕或小圖標(biāo)等整合到一張背景圖片文件中，圖片格式可以采用gif、jpg或png-8位格式。如果是顏色值在256色內(nèi)的小圖片，而且底色透明，可以采用png-8位格式; 如果圖片是動(dòng)態(tài)的，可以采用gif格式; 如果要合并背景類(lèi)的大圖片，可采用jpg格式。

　　接下來(lái)，利用CSS的“background-image”、“background- repeat”、“background-position”等屬性進(jìn)行背景定位，“background-image”屬性表示背景圖的URL路徑;“background- repeat”屬性表示背景圖是否平鋪;“background-position”屬性則代表用數(shù)值精確的定位出背景圖片的位置。

　　例如：采用Fireworks將3個(gè)icon圖標(biāo)集成在了一張sprites.png中，該png圖尺寸為125*48，每個(gè)icon的尺寸都是41*48，間隔是1px，它們?cè)趐ng中的坐標(biāo)分別是(0，0)(42，0)(84，0)。

　　網(wǎng)頁(yè)中使用了三個(gè)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;}

　　網(wǎng)頁(yè)最終效果如圖2所示。

　　background-position(圖像背景位置)這個(gè)屬性是CSS中非常重要的屬性。使用這個(gè)屬性，你可以定義塊級(jí)元素的背景圖像位置，可以使用%百分比或px像素為單位來(lái)定義圖像開(kāi)始的位置，也可以使用關(guān)鍵字：left/center/right和top/center/bottom，background-position的前一個(gè)值表示水平方向的定位，后一個(gè)值表示垂直方向的定位。

　　3 CSS Sprites技術(shù)的應(yīng)用范圍

　　一般來(lái)說(shuō)，CSS Sprites技術(shù)可以應(yīng)用在以下幾種情況中：

　　1

　　) 減少圖片數(shù)量。我們?cè)跒g覽網(wǎng)頁(yè)的時(shí)候，在瀏覽器狀態(tài)欄中經(jīng)?？梢钥吹?ldquo;(剩下X項(xiàng))正在下載圖片……”這樣的信息，圖片數(shù)量越多，網(wǎng)頁(yè)加載的速度越慢。利用CSS Sprites技術(shù)，將多個(gè)同類(lèi)型的小圖片綜合在一張圖片里，減少圖片的數(shù)量，同時(shí)可以令圖標(biāo)的總?cè)萘孔冃?，比如集合?個(gè)圖標(biāo)的一幅Sprites圖片的size，會(huì)比這9個(gè)單張圖標(biāo)的size總和要小，這是CSS Sprites的主要作用，以盡量減少圖片數(shù)量為前提，只要連接服務(wù)器一次，就可以將所有圖標(biāo)加載下來(lái)。

　　2) 預(yù)先加載鼠標(biāo)經(jīng)過(guò)時(shí)切換圖片。在網(wǎng)頁(yè)中經(jīng)常會(huì)用到鼠標(biāo)經(jīng)過(guò)時(shí)，或鼠標(biāo)按下時(shí)切換到不同圖片的效果，這時(shí)經(jīng)常會(huì)出現(xiàn)延遲或圖片無(wú)法顯示的情況，這主要是因?yàn)闉g覽器為了盡快地顯示頁(yè)面，一般只是將打開(kāi)頁(yè)面時(shí)用到的圖片下載到本地，而鼠標(biāo)經(jīng)過(guò)圖片往往是等到用戶(hù)將鼠標(biāo)移動(dòng)到按鈕時(shí)，圖片才開(kāi)始下載。如果把多種狀態(tài)的圖合并成一張圖，再使用CSS Sprites技術(shù)模擬動(dòng)態(tài)切換效果，效果將會(huì)更加流暢。

　　3) 自適應(yīng)寬度的背景圖，也叫滑動(dòng)門(mén)。如果頁(yè)面中存在平鋪背景圖的效果，并且?guī)в羞吔牵梢栽谝粡垐D片中結(jié)合平鋪的背景和邊角，再利用CSS背景定位實(shí)現(xiàn)。例如圓角矩形效果的實(shí)現(xiàn)，可以在Sprites圖中單獨(dú)繪制出上下左右四個(gè)頂角圓角的效果，中間的背景只要做一小塊矩形即可，利用CSS平鋪實(shí)現(xiàn)來(lái)填充整個(gè)DIV，具體寬度高度可以自定義，而四個(gè)圓角的位置則在網(wǎng)頁(yè)中用CSS來(lái)定位，這樣做可以簡(jiǎn)化html文檔的結(jié)構(gòu)。

　　4 運(yùn)用CSS Sprites技術(shù)時(shí)可能遇到的問(wèn)題

　　雖然CSS Sprites技術(shù)非常強(qiáng)大，但使用過(guò)程中也存在一些不可忽視的問(wèn)題：

　　1) 在圖片合并的時(shí)候，需要把多張圖片有序的合理的合并成一張圖片，要把握好圖標(biāo)之間的空隙，防止網(wǎng)頁(yè)中出現(xiàn)不必要的背景。如果在寬屏，高分辨率的顯示器下，圖片如果不夠?qū)?，很容易出現(xiàn)背景斷裂的情況。

　　2) 在開(kāi)發(fā)和設(shè)計(jì)圖片的時(shí)候，需要通過(guò)Fireworks或Photoshop等圖像處理軟件測(cè)量計(jì)算每一個(gè)背景單元的精確位置，雖然沒(méi)什么難度，但是很繁瑣，不過(guò)網(wǎng)上已經(jīng)出現(xiàn)了“CSS Sprites 樣式生成工具”，甚至有些網(wǎng)站具有在線轉(zhuǎn)換的功能，能夠快速的根據(jù)Sprites圖片計(jì)算出CSS樣式代碼。

　　3) 在維護(hù)和管理圖片的時(shí)候比較麻煩，如果頁(yè)面背景有少許改動(dòng)，比如只是更換一個(gè)小圖標(biāo)，那么就要修改整張合并的大圖片，如果要改變一個(gè)圖標(biāo)的尺寸，很可能需要重新計(jì)算圖片的位置，這將會(huì)非常繁瑣，一般只好在別的位置再添加一個(gè)圖標(biāo)。

　　4) 由于CSS Sprites大多使用于較固定的像素定位中，彈性較差，受到定位等因素的制約，無(wú)法做到像center相對(duì)定位效果一樣靈活。

　　5 小結(jié)

　　CSS Sprites常用來(lái)合并頻繁使用的圖形元素，如區(qū)塊背景、導(dǎo)航條、icon圖標(biāo)、網(wǎng)站LOGO、分割線、button按鈕等，以方便網(wǎng)頁(yè)中CSS調(diào)用。整合Sprites圖片時(shí)讓圖標(biāo)盡量排列得有規(guī)律，這樣容易定位和維護(hù)。將背景顏色一致的圖標(biāo)放置在一起，如果背景顏色不一樣, 最好分為兩個(gè)或多個(gè)圖片放置。最好將相同欄目的圖標(biāo)放置在一起，可以節(jié)省一些 CSS 代碼。另外，不要將尺寸較大的圖整合在一起，因?yàn)檫@樣的圖片size會(huì)比較大，加載需要一定的時(shí)間，而大部分用戶(hù)都不會(huì)耐心地等待頁(yè)面下載完畢再進(jìn)行閱讀。

　　參考文獻(xiàn)：

　　[1] 曾順. 精通CSS+DIV網(wǎng)頁(yè)樣式與布局[M].北京:人民郵電出版社,2010.

　　[2] 杜現(xiàn)朝, 許建平, 龍懷冰. Web標(biāo)準(zhǔn)中的定位原理及其應(yīng)用[J].計(jì)算機(jī)工程與設(shè)計(jì),2008(23).

　　[3] 張軍. CSS Sprites在Web開(kāi)發(fā)中的應(yīng)用[J].考試周刊,2010(31).

　　注：本文中所涉及到的圖表、注解、公式等內(nèi)容請(qǐng)以PDF格式閱讀原文