作爲一個開發人員，前後臺一併開發是常有的事。多數服務端開發人員不太擅長網頁前端開發，所以開發出來的網頁說好聽點就是簡單，說不好聽就是不好看。
今天我爲大家介紹一個網頁圖標的合併以及它的使用方法。
首先說下爲什麼要用圖片合併。
一個頁面所引用的資源（如頁面上引用到的圖標）都需要去服務器進行單獨獲取，如果所引用的資源過多，往往會造成服務器壓力過大（這也是爲什麼有網站會建立圖片服務器進行分流的原因）。所以我們可以把需要經常用到的圖片進行合併成一張，然後再通過CSS樣式進行切割調用。（TIPS.合併後圖片大小也會比之前圖片總大小小哦）
其次，合併圖片格式的選擇，在此就不贅述了。網上大神多，給個鏈接。
看了連接的大概都知道會用什麼格式的了。對，就是png的(取它優點背景透明，圖片不大）。
現在我們需要的是圖片。
PS大神小神可以選擇自己做圖標，不會的也沒關係，去這裏找吧http://www.easyicon.net/
比如我現在下載了三個圖標，都是24*24像素的。
PS大神小神可以選擇自己合併，不會的也沒關係，去這裏吧。http://csssprites.com/，具體操作自己熟悉，也可以從網上找圖片合併軟件。如http://78.duote.com.cn/cssjbhb.zip
這兩個都挺簡單易用的。
合併後的圖片如下：
現在建立一個CSS樣式文件：icon.css，三種狀態給它取三個對應名稱，分別爲help,info,warning。因爲這三個圖標基本屬性都相同，只不過位置不一樣，所以我們可以先定義它們的相同屬性，再分別定義它們獨自的屬性。
/*不同class之間用逗號分隔，下面是它們的相同屬性*/
.warning,.info,.help{
width: 24px;/*寬度爲24像素*/
height: 24px; /*高度爲24像素*/
display: inline-block; /*讓圖標與它後面的內容能在同一行顯示*/
vertical-align:middle;/*讓圖標後面的文字垂直居中*/
background-image:url(../images/icons.png);/*合併後圖片的相對路徑*/
background-repeat:no-repeat; /*背景不重複*/
}說完它們的相同屬性，現在要說它們的不同點——位置了。
首先給大家講一下位置的屬性。
在CSS中，圖片的原點（0，0）是在圖片的左上角。往右走是負的（X軸），往下走也是負的（Y軸）。
好了，現在給它們定義獨自的屬性吧。
.warning{background-position: 0 0;}/*感嘆號*/
.info{background-position: -24px 0;} /*信息*/
.help{background-position: -48px 0;} /*幫助*/合起來，icons.css的內容就是：
.warning,.info,.help{
width: 24px;/*寬度爲24像素*/
height: 24px; /*高度爲24像素*/
display: inline-block; /*讓圖標與它後面的內容能在同一行顯示*/
vertical-align:middle;/*讓圖標後面的文字垂直居中*/
background-image:url(../images/icons.png);/*合併後圖片的相對路徑*/
background-repeat:no-repeat; /*背景不重複*/
}
.warning{background-position: 0 0;}/*感嘆號*/
.info{background-position: -24px 0;} /*信息*/
.help{background-position: -48px 0;} /*幫助*/用法也很簡單。
在HTML中加入CSS的引用
<link rel="stylesheet" type="text/css" href="../styles/public/icons.css"><a class="info"></a><a class="info"><span style="color:#6633FF;">這裏不能寫東西呀！</span></a>