CSS精靈圖，又稱CSS Sprite，是將多個小圖片合并到一張大圖中，通過CSS的background-position來控制顯示相應的小圖片。CSS精靈圖的優點在于可以減少HTTP請求次數，提高頁面的加載速度。

// CSS樣式
.sprite {
display: inline-block;
background-image: url('sprite.png');
background-repeat: no-repeat;
}
// 顯示小圖片1
.sprite1 {
width: 50px;
height: 50px;
background-position: 0 0;
}
// 顯示小圖片2
.sprite2 {
width: 100px;
height: 100px;
background-position: -50px 0;
}

上面的樣式中，.sprite表示精靈圖的基礎樣式，.sprite1和.sprite2表示要顯示的小圖片樣式，其中background-position規定了小圖片在精靈圖中的偏移位置。

使用CSS精靈圖時，需要注意以下幾點：

• 保證小圖片之間的間隙不會產生影響。
• 使用CSS3的background-size屬性可以方便地控制精靈圖的大小。
• 在Retina屏幕下，需要提供2倍大小的精靈圖，通過@media查詢來實現。
• 使用工具可以方便地生成精靈圖。