CSS精靈圖是將多個(gè)小圖片合并成一張大圖片，通過(guò)CSS的background-position屬性來(lái)定位顯示需要的小圖片，從而減少頁(yè)面請(qǐng)求數(shù)量，提高網(wǎng)頁(yè)加載速度，優(yōu)化用戶(hù)體驗(yàn)。

CSS精靈圖的取值要知道兩個(gè)屬性，一個(gè)是background-position-x，一個(gè)是background-position-y。其中background-position-x是用來(lái)設(shè)置背景圖橫向方向上的位置的，可以設(shè)置為具體的像素值，也可以用關(guān)鍵字left、center和right；background-position-y是用來(lái)設(shè)置背景圖縱向方向上的位置的，一般也是用關(guān)鍵字top、center和bottom。兩個(gè)屬性組合在一起就可以精確地定位某張小圖片了。

.demo {
width: 160px;
height: 160px;
background-image: url(sprite.jpg);
}
.demo1 {
background-position: -40px -60px;
}
.demo2 {
background-position-x: -80px;
background-position-y: -120px;
}

在上面的代碼中，我們首先定義了一個(gè)CSS類(lèi).demo，它的寬高都是160px，并且引用了一張名為sprite.jpg的精靈圖。接著我們又定義了兩個(gè)新的CSS類(lèi).demo1和.demo2，它們分別設(shè)置了不同的background-position值來(lái)獲取精靈圖中的不同小圖片。

通過(guò)使用CSS精靈圖，可以使頁(yè)面更加流暢和高效，因此在設(shè)計(jì)和開(kāi)發(fā)過(guò)程中，我們應(yīng)該在必要的時(shí)候采用精靈圖技術(shù)，從而提高網(wǎng)頁(yè)性能。