CSS精靈圖是指多個小圖標拼成一個大圖，通過CSS的background-position屬性來控制顯示不同的小圖標，從而實現圖片資源的最大化利用。

下面是一個制作CSS精靈圖的基本步驟：

1.準備多張小圖標，大小位置最好相同，并排列成一張大圖，保存為png或jpg格式。

.sprite-img{
background-image:url(sprite.jpg);
width:xxpx;
height:xxpx;
}

2.在CSS樣式中給大圖一個對應的類名，并設置寬高為單個小圖標的大小。

.icon-home{
background-position:0 0; /*第一列第一行*/
}
.icon-message{
background-position:-20px 0; /*第一列第二行*/
}

3.給每個小圖標設置一個對應的類名，并設置背景位置使其與大圖對應起來。

.sprite-img{
background-image:url(sprite.jpg);
width:xxpx;
height:xxpx;
}
.icon-home{
background-position:0 0;
width:20px;
height:20px;
}
.icon-message{
background-position:-20px 0;
width:20px;
height:20px;
}

4.在HTML中使用對應類名即可顯示該小圖標。

<div class="sprite-img icon-home"></div>
<div class="sprite-img icon-message"></div>

利用CSS精靈圖，可以減少前端頁面請求的圖片資源數量，更好的優化頁面性能。