CSS精靈技術是一種優化網頁加載速度的技術，它將多張小圖片合并為一張大圖片，通過background-image與background-position屬性實現圖片顯示效果，減少了網頁請求次數，提升了用戶體驗。下面是一個簡單的案例。

.icon {
display: inline-block;
background-image: url(sprite.png); /*精靈圖片路徑*/
}
.avatar {
width: 20px;
height: 20px;
background-position: 0 0; /*坐標*/
}
.like {
width: 20px;
height: 20px;
background-position: -20px 0; /*坐標*/
}
.reply {
width: 20px;
height: 20px;
background-position: -40px 0; /*坐標*/
}

在上面的代碼中，我們首先創建了一個class為icon的樣式，將多張小圖片合并為一張大圖片（sprite.png），將其當做背景圖片顯示。接著，我們創建了三個class分別為avatar、like和reply，它們分別定義了圖片在大圖片中的坐標。

下面是HTML代碼示例：

<div class="icon">
<span class="avatar"></span>
<span class="like"></span>
<span class="reply"></span>
</div>

在HTML中，我們創建了一個class為icon的div，它包含了三個class分別為avatar、like和reply的span元素。

通過CSS精靈技術，我們可以在不加載多張小圖片的情況下，顯示出多張小圖片的效果，這可以大幅度提高網頁加載速度，優化用戶體驗。