CSS精靈圖是一種將多個小圖片合成為一張大圖片的方式來減少頁面加載時間和http請求次數的技術。CSS精靈圖通常使用background-image和background-position屬性來顯示不同的小圖片。

下面是使用CSS精靈圖的示例代碼：

/* background-image設置為包含多個小圖片的大圖片 */
.sprite {
background-image: url(sprite.png);
background-repeat: no-repeat;
}
/* 使用background-position來顯示不同的小圖片 */
.sprite.logo {
background-position: 0 0; /* 顯示第一個小圖片 */
width: 100px;
height: 50px;
}
.sprite.menu {
background-position: -100px 0; /* 顯示第二個小圖片 */
width: 50px;
height: 50px;
}

上述代碼中，.sprite類設置了共用的background-image屬性，接著使用.sprite.logo和.sprite.menu兩個類來分別顯示sprite.png中的第一個小圖片和第二個小圖片。

當頁面加載時，瀏覽器只需一次http請求來獲取sprite.png，而不需要為每個小圖片分別請求一次。這樣就能減少頁面加載時間和http請求次數，提高頁面性能。