CSS定位精靈圖（CSS Sprite）是一種在網頁設計中經常使用的技術，它通過將多張圖片合成為一張大圖，并利用CSS的背景定位來實現圖像的切換和滑動效果。這種技術可以減少網頁的HTTP請求，從而加快頁面加載速度，提高用戶體驗。
在使用CSS定位精靈圖時，首先需要創建一張大圖，將需要使用的小圖按需合并到這張大圖中。然后，通過CSS的background-image屬性將這張大圖作為背景，再使用background-position屬性來定位需要的小圖。
以下是一個示例代碼，以一個包含兩張小圖的精靈圖為例：

.sprite {
background-image: url('images/sprite.png');
width: 100px;
height: 100px;
}
<br>
.sprite-icon1 {
background-position: 0 0;
width: 50px;
height: 50px;
}
<br>
.sprite-icon2 {
background-position: -50px 0;
width: 50px;
height: 50px;
}

在上面的代碼中，.sprite是一個包含兩張小圖的精靈圖，它的寬度和高度分別為100px，通過background-image屬性設置了背景圖片。.sprite-icon1和.sprite-icon2是分別對應兩張小圖的類名，通過background-position屬性分別將要使用的小圖定位到正確的位置。
在HTML中，只需要給需要使用這些小圖的元素添加對應的類名即可實現圖像的顯示。
例如：

<div class="sprite sprite-icon1"></div>
<div class="sprite sprite-icon2"></div>

如此一來，我們就成功使用了CSS定位精靈圖來展示多個圖像，同時還減小了HTTP請求的次數，優化了網頁性能，提高了用戶體驗。
總之，CSS定位精靈圖是一種非常實用的網頁設計技術，它可以通過合并多張小圖為一個大圖來優化網頁性能，并且可以簡化HTML和CSS的編寫過程，是一種非常值得使用的技術。