在前端開發中，圖片精靈是一種常用的技術，可以有效地減少網頁加載時間，提升用戶體驗。CSS圖片精靈是一種利用CSS對多張圖片進行合并，并通過background-position來顯示對應的圖片部分的技術。

在CSS中定義圖片精靈需要定義以下幾個屬性：

.sprite {
width: 50px; // 定義精靈圖片寬度
height: 50px; // 定義精靈圖片高度
background-image: url("sprite.png"); // 精靈圖片路徑
background-repeat: no-repeat; // 禁止平鋪
}

接下來，在HTML中調用精靈圖片需要在對應元素中定義background-position，用來定位對應部分的圖片位置。

.icon1{
background-position: 0 0;
}
.icon2{
background-position: -50px 0;
}
.icon3{
background-position: -100px 0;
}

以上就是CSS圖片精靈的基本使用方法，通過CSS將多張圖片合并成一張，指定位置來顯示對應的圖片，從而減少多次請求服務器，減少網頁加載時間。