CSS小圖片合為一張圖片是一種常用的技巧，它可以幫助我們優化頁面加載速度，減少HTTP請求數，提高用戶體驗。下面我們來了解一下實現方法。

.sprite {
background-image: url('sprite.png');
background-repeat: no-repeat;
}
.icon {
width: 20px;
height: 20px;
display: inline-block;
}
.icon-home {
background-position: 0 0;
}
.icon-setting {
background-position: -20px 0;
}
.icon-profile {
background-position: -40px 0;
}

首先，我們創建一張包含所有小圖片的大圖，命名為sprite.png。然后，我們定義一個類名為.sprite的樣式，將它的背景圖片設置為sprite.png。接著，我們定義一些類名為.icon-X的樣式，每個樣式設置不同的背景位置，以顯示不同的小圖標。

在HTML中，我們只需要給需要顯示小圖標的元素添加.icon和.icon-X的類名即可，如下所示：

<div class="sprite">
<span class="icon icon-home"></span>
<span class="icon icon-setting"></span>
<span class="icon icon-profile"></span>
</div>

這樣，三個小圖標就會合為一張大圖，通過CSS的背景位置設置，分別顯示在各自的元素上。

注意，由于合并后的圖片寬高固定，為了防止拉伸變形，需要給每個小圖標設置固定的寬高，并將它們的display屬性設置為inline-block。同時，不要忘記給.sprite類名設置background-repeat: no-repeat，以避免重復顯示。