CSS精靈圖是一種應用于Web開發中的技巧，它是通過將多張不同的小圖片合并為一張大圖，再利用CSS的background-position屬性實現小圖片的定位與顯示。

.icon{
background-image: url(sprites.png);
width: 16px;
height: 16px;
display: inline-block;
}
.icon-phone{
background-position: -16px 0;
}
.icon-email{
background-position: -32px 0;
}

上述代碼中，.icon為所有小圖片的共同類名，用于定義它們的共同樣式，包括背景圖片、寬度、高度和display屬性。而.icon-phone和.icon-email則是各自小圖片的類名，通過background-position屬性控制小圖片在大圖中的位置。

相對于單獨使用多張圖片，CSS精靈圖的優勢在于它可以減少網站的HTTP請求次數，從而提升網站的加載速度，同時還可以通過預加載的方式提升用戶體驗。

在構建CSS精靈圖時，可以選擇手動制作或使用一些開源工具進行自動生成，如Compass、Spritesmith等。手動制作需要具備一定的設計和編輯技能，而開源工具則需要熟練運用命令行或相關軟件工具。

總之，CSS精靈圖是一種十分實用的Web開發技巧，它不僅能夠提高網站性能，還能夠美化頁面，為用戶帶來更好的體驗。