CSS精靈圖是前端開發者經常使用的技術之一。它可以將多個小的圖像合并成為一個大圖像，減少了HTTP請求次數，提高了網頁的加載速度。

下面是一個使用CSS精靈圖的示例代碼：

.icon {
background-image: url("sprites.png");
background-repeat: no-repeat;
display: inline-block;
}
.icon-home {
width: 24px;
height: 24px;
background-position: 0 0;
}
.icon-cart {
width: 24px;
height: 24px;
background-position: -24px 0;
}
.icon-user {
width: 24px;
height: 24px;
background-position: -48px 0;
}

上面的代碼定義了一個名為“icon”的CSS類，使用名為“sprites.png”的圖片作為背景。三個不同的子類“icon-home”、“icon-cart”和“icon-user”分別對應于不同的小圖像，通過不同的“background-position”來定位這些小圖像。

在HTML代碼中，只需添加對應的類名即可實現對應的圖像：

<span class="icon icon-home"></span><span class="icon icon-cart"></span><span class="icon icon-user"></span>

上面的HTML代碼將會在頁面中顯示出三個不同的圖像，都使用了同一個CSS類“icon”。這樣，就可以將多個小圖像合并成為一個大圖像，提高了頁面的性能和用戶的體驗。