通過兩個案例，講解將多張圖片合成到一張圖片中，CSS定義及HTML加載的方法。
該技術的好處是：
1. 只需加載一次圖片，減少了網絡通信次數；
2. 圖片大小得到明顯的減小；案例2中18張圖片合計100+K，合成後不到30K；
案例一：交換機中端口狀態顯示
visio 畫圖（用連接線工具）
2. 複製到繪圖工具
調整到足夠小
複製圖片，空白區域自動擴展到圖片大小
填充顏色
獲取圖片大小
3. ps新建
修改寬、高，即上述獲取到的寬、高，背景透明
4. 從繪圖工具裏複製圖片，粘貼到PS裏
5. 將多個圖片文件合併到一個文件裏
打開http://cn.spritegen.website-performance.org/
background-position 指定了要加載大圖片中的哪塊區域的小圖片
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[class^="icon-"],
[class*=" icon-"] {
background-image: url("csg-53747e4dc17cb.png");
background-repeat: no-repeat;
}
.icon-1_off{ background-position: 0 0; width: 30px; height: 23px; }
.icon-1_on{ background-position: -32px 0; width: 30px; height: 23px; }
}
</style>
</head>
<BODY>
<div style="width:420px;margin-left:10px;">
<p class="icon-1_on"></p>
<p class="icon-1_off"></p>
</div>
</BODY>
</html>網頁效果圖：
案例二：8個方向鍵1個停止鍵
現在有18張圖片，那麼怎麼把它們合成爲1張圖片呢？
步驟是：
1. 將這18張圖片壓縮成1個文件
2. 打開網站http://cn.spritegen.website-performance.org/，該網站提供在線服務----CSS圖片拼合生成器
3.
4.
5.
那麼如何在代碼中使用呢？
步驟是：
1. 下載已拼合圖片，名爲csg-53b65301bb02a.png
2. css文件中
[class^="PtzControl-"],[class*="PtzControl-"]
{
background-image: url("../images/csg-53b65301bb02a.png");
background-repeat: no-repeat;
width:30px;
height:30px;
cursor:pointer;
border:0 none;
}
.PtzControl-1-out
{
background-position:0 0;
}
.PtzControl-1-over
{
background-position:0 -80px;
}3. html文件中
<button class="PtzControl-1-out" onmouseover="this.className='PtzControl-1-over'"
onmouseout="this.className='PtzControl-1-out'" id="leftup" style="display:block">
</button>最終效果圖：
