CSS雪碧圖，又稱CSS Sprite，是將多張小圖片合并成一張大圖，并通過CSS的background-position和background-size來控制顯示對應小圖片的技術。

.logo {
width: 100px;
height: 100px;
background-image: url('sprite.png');
background-position: 0 0;
}
.menu {
width: 50px;
height: 50px;
background-image: url('sprite.png');
background-position: -100px 0;
}

上面的代碼示例中，我們將兩張圖片合成了一張雪碧圖sprite.png，通過設置background-position來控制顯示對應的小圖片。

使用CSS雪碧圖有以下好處：

• 減少HTTP請求次數(shù)，提高網(wǎng)頁加載速度；
• 利于圖片壓縮，減小圖片大??；
• 提高頁面渲染速度，減少頁面卡頓。

但是，使用CSS雪碧圖也有一些需要注意的問題：

• 圖片合成后不易修改，需要重新生成雪碧圖；
• 對于高分辨率屏幕，需要提供2倍及以上的大小，增加工作量和服務器壓力；
• 代碼維護不易，需要標記每個小圖片的位置和大小。

總的來說，CSS雪碧圖是一種優(yōu)秀的前端優(yōu)化技術，但也需要在實際應用中謹慎使用。