CSS精靈圖是一種將多個小圖片放到一張大圖片中，再利用css background-position來顯示所需部分的技術。使用CSS精靈圖可以減少網頁的http請求次數，使頁面加載更快。那么CSS精靈圖應該如何引用呢？下面我們來看一下具體步驟。 首先，準備一張包含多個小圖片的精靈圖。圖片格式可選擇PNG、JPEG等格式。圖片大小一般控制在不超過200KB，避免過大的圖片影響加載速度。 然后，在html中添加對應的元素，例如：

<div class="btn-home"></div>

這里我們添加了一個class名為“btn-home”的div元素。 接著，在CSS文件中設置精靈圖的背景圖片和background-position，例如：

.btn-home {
width: 30px;
height: 30px;
background: url(images/sprites.png) no-repeat 0 0; /* 設置精靈圖背景圖片 */
background-position: -15px -282px; /* 設置顯示區域 */
}

這里給.btn-home設置了寬度和高度，并指定精靈圖的背景圖片為“images/sprites.png”，坐標為（0，0）的位置。接著，利用background-position將btn-home的顯示區域設置為精靈圖坐標為（-15，-282）位置的小圖片。 最后，通過html中添加的元素class名來調用CSS樣式：

<div class="btn-home"></div>

這樣，我們就成功引用了一個CSS精靈圖。 總結來說，使用CSS精靈圖可以減少頁面的http請求，達到提高頁面加載速度的目的。引用CSS精靈圖的步驟為：1.準備圖片；2.在html中添加元素；3.在CSS文件中設置背景圖片和background-position；4.通過class名調用CSS樣式，即可成功引用CSS精靈圖。