CSS精靈圖基本概念

CSS精靈圖是一種優化頁面性能的技術，在設計網頁時將許多小的圖片整合到一張大圖中，在網頁中只需要使用一個CSS樣式表就可以引用到這個大圖，這樣在網頁加載時只需要請求一張大圖，而不是多個小圖，節省了網絡請求并提高了網頁加載速度。

CSS精靈圖坐標計算

.sprite {
background-image: url(sprite.png);
background-repeat: no-repeat;
display: inline-block;
}
.icon1 {
width: 40px;
height: 40px;
background-position: 0 0;
}
.icon2 {
width: 50px;
height: 50px;
background-position: -50px 0;
}
.icon3 {
width: 60px;
height: 60px;
background-position: -100px 0;
}

在上面的代碼中，我們定義了一個CSS類名為.sprite，它是我們引用CSS精靈圖的背景圖片，并且取消了圖片的重復顯示。接下來，定義了三個不同圖標的CSS類名.icon1、.icon2、.icon3，設置它們的寬度、高度和背景位置。其中，背景位置的計算方法為：
橫向坐標：當前圖標在精靈圖中的左上角離精靈圖左邊緣的距離，取負值；
縱向坐標：當前圖標在精靈圖中的左上角離精靈圖上邊緣的距離，取負值；

實際應用中的注意點

在使用CSS精靈圖時，我們需要注意以下幾點：
1. 確保精靈圖中每個圖標的間距相等，否則計算坐標時會出現偏移；
2. 精靈圖像素盡量壓縮，以減小圖片大小，提高網頁加載速度；
3. 針對不同圖標的尺寸大小，可以設置不同的樣式，在應用時根據實際需要進行調整。