在網頁設計中，我們經常使用CSS來美化頁面，其中一個重要的技巧就是使用CSS精靈圖。CSS精靈圖是將多個小圖片合并成一張大圖，通過設置背景圖及background-position屬性，顯示不同的圖片，從而減少HTTP請求，提高網頁性能。除此之外，CSS精靈圖還可以實現鼠標滑過效果，提高頁面交互體驗。

/* 將小圖片合成一張大圖 */
.sprite {
background: url(sprite.png) no-repeat;
display: inline-block;
}
/* 設置不同的圖片位置 */
.iconA {
background-position: 0px 0px;
width: 20px;
height: 20px;
}
.iconB {
background-position: -30px 0px;
width: 20px;
height: 20px;
}
/* 鼠標滑過效果 */
.sprite:hover .iconA {
background-position: 0px -30px;
}
.sprite:hover .iconB {
background-position: -30px -30px;
}

以上代碼中，我們首先將3個小圖片合成一張大圖，然后設置它們的不同圖片位置，并定義類名為“.sprite”的div標簽作為容器。當鼠標滑過“.sprite”容器時，“.iconA”和“.iconB”會切換到新的位置，實現鼠標滑過效果。