在Web開發中，精靈圖（Sprite）是一個很常見的技術，將多個小圖片合并成一個大圖片，避免多次加載小圖片，從而提高網站的性能。那么如何將精靈圖插入到CSS樣式中呢？

首先，需要準備一個合并好的大圖片和相應的CSS代碼。

/*定義精靈圖的背景圖及尺寸*/
.sprite {
background-image: url('sprite.png');
background-repeat: no-repeat;
display: inline-block;
} 
/*第1個小圖片在精靈圖中的位置及大小*/
.icon01 {
width: 30px;
height: 30px;
background-position: -10px -20px; /*左偏移-10px，上偏移-20px*/
}
/*第2個小圖片在精靈圖中的位置及大小*/
.icon02 {
width: 40px;
height: 40px;
background-position: -50px -10px; /*左偏移-50px，上偏移-10px*/
}

其中，background-image定義了背景圖的URL，background-repeat設置為no-repeat，防止出現背景圖重復的現象。使用background-position確定每個小圖片在大圖片中的位置。

然后，在HTML中使用相應的類名來引用圖片：

<div class="sprite icon01"></div>
<div class="sprite icon02"></div>

以上代碼中，<div>元素使用類名sprite和icon01（或icon02）。通過樣式表定義，設置width、height等屬性，從而顯示對應的圖片。

總結一下，精靈圖可以有效提升網站加載速度，而將精靈圖插入到CSS樣式中也是非常簡單的。只需要在樣式表中定義background-image、background-position等屬性，并在HTML中添加相關的類名即可實現。