當用戶訪問一個網站時，需要向服務器發送請求。而網頁上的每張圖都需要經過一次請求才能展示給用戶。
然而，一個網頁中往往會應用很多小的背景圖片作爲裝飾。當網頁中的圖像過多時，服務器就會頻繁的接收和發送請求，這將大大降低頁面的加載速度。爲了有效的減少服務器接收和發送請求的次數，提高頁面的加載速度 ，出現了css精靈技術（也叫css sprite、css 雪碧）。
精靈技術的本質
css 精靈是一種處理網頁背景圖像的方式。它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然後將大圖應用於網頁，這樣，當用戶訪問該頁面時，只需要向服務器發送一次請求，網頁中的背景圖片即可全部展示出來。通常情況下，這個由很多小的背景圖像合成的大圖稱爲精靈圖（雪碧圖）。
精靈技術的使用
css 精靈是將網頁中的一些背景圖像整合到一張大圖中（精靈圖）。各個網頁元素通常只需要精靈圖中不同位置的某個小圖，想要精確定位到精靈圖中的某個小圖，就需使用到css的background-image、background-repeat、background-position屬性進行背景定位。最關鍵的就是使用background-position屬性進行精確的定位。
demo:(下圖是某遊戲官網的一張精靈圖)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h3{
background: url("img/sprite/index.png") no-repeat -2px -186px;
height: 26px;
}
div{
height: 125px;
background:url("img/sprite/index.png") no-repeat 0 -220px;
}
h4{
height: 24px;
background:url("img/sprite/index.png") no-repeat -156px -109px;
}
</style>
</head>
<body>
<h3></h3>
<h4></h3>
<div></div>
</body>
</html>
效果圖：
最後：背景圖片很少的情況下，沒必要使用精靈圖，維護成本比較高。背景圖片比較多的情況下，可以建議使用精靈技術。