在CSS中，精靈圖是一種將多個圖像組合成一個單一圖像的方法。這個單一的圖像可以在網頁中的不同位置使用，以一定的方式來展示各個不同的圖片。使用精靈圖可以減少網頁加載時間，因為只需要加載一個圖像，而不是多個單獨的圖片。

一個精靈圖可以包含多個不同的圖片，這些圖片可以是按鈕、標志、圖標等各種網頁元素。通過使用CSS，我們可以改變精靈圖中每個圖片的顯示位置。方法是：將整個圖像作為背景圖像指定給一個元素，然后用background-position屬性調整所需的圖像位置。

有些網站在其CSS文件中使用基礎的background-position來調用精靈圖。這種方法不可行，因為必須用精確的像素值來調用每個圖像。如果您的網站的背景圖像沒有與精靈圖對齊，這將會產生問題。

.icon {
display: inline-block;
background: url('sprites.png') no-repeat;
}
.icon-home {
width: 16px;
height: 16px;
background-position: 0 0;
}
.icon-profile {
width: 16px;
height: 16px;
background-position: -16px 0;
}
.icon-messages {
width: 16px;
height: 16px;
background-position: -32px 0;
}

在上面的例子中，class為.icon的元素被指定為精靈圖并設置為no-repeat。每個圖標都有一個特定的類別，如.icon-home、.icon-profile和.icon-messages。每個類別都定義一個特定的大小并指定背景圖像的位置。當類應用到相應的元素時（如或標簽），它們將顯示相應的圖標。

如果您希望創建一個具有交互式和動態效果的Web應用程序，精靈圖技術可能不足夠。然而，對于大量的靜態元素（如圖標、背景、字形等）來說，使用精靈圖是一種有用的技術，可以提高網站的加載速度。