cssSprites是一種效能優化技術，一種網頁圖片應用處理方式：將多個影象組合成單個影象檔案以在網站上使用的方法，以提高效能；也被稱為css精靈圖。

網頁通常包含多個影象。這些包括圖示，按鈕，徽標，相關圖片和其他圖形。當頁面中載入影象時，瀏覽器向伺服器發出HTTP請求。分別載入每個影象需要多次呼叫HTTP伺服器，這可能導致下載時間變慢以及頻寬使用率過高。

CSS Sprites會將多個影象組合成一個稱為精靈表或拼貼圖的單個影象，使用者不下載多個檔案，而是下載單個檔案並通過偏移檔案顯示必要的影象（或精靈圖）。

這樣可以減少對伺服器的呼叫、減少呈現網頁所需的下載次數，節省頻寬並縮短使用者端的下載時間，減少網路擁塞。

廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com

如何使用CSS Sprites（精靈圖）？

因為CSS Sprites是一張多個影象組合成單個影象，在精靈表中多個影象會被放置在網格狀圖案裡，呈現網狀分佈。

當需要特定影象（精靈圖）時，可以通過CSS background背景定位技術技巧佈局網頁背景。在需要用到圖片的時候，現階段是通過CSS屬性background-image組合background-repeat, background-position等來實現圖片的顯示。

瞭解了background-position屬性的用法，使用精靈圖之前，我們需要知道精靈圖中各個圖示的位置。

從上面的圖片不難看出Sprites（精靈圖）中各個小圖示（icon）在整張Sprites（精靈圖）的起始位置，例如第一個圖示（裙子）在精靈圖的起始位置為 x：0，y：0，第二個圖示（鞋子）在精靈圖的起始位置為 x：0，y：50px，第三個圖示（足球）在精靈圖的起始位置為x：0，y：100px，依次類推可以得出各個圖片相對於精靈圖的起始位置。

以上面的Sprites（精靈圖）為例（實際精靈圖中各個小圖片的起始位置和上面的展示圖不同）用一個Demo來闡述它的使用方法。

html

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div
 
>

CSS

<style>
       .box {
         width: 600px;
         height:300px;
         border: 3px solid #ccc;
         background-color: #8064A2;
        }
        span {
         display: inline-block;
         width: 25px;
         height: 25px;
         border: 3px solid #ccc;
         background-image: url(css/img/sidebar.png);
         background-repeat: no-repeat;
         margin: 5px;
        }
       .icon1 {
         background-position: 0 0;
        }
       .icon2 {
         background-position: -40px 0;
        }
       .icon3 {
         background-position: 0 -25px;
        }
       .icon4 {
         background-position: -40px -25px;
        }
</style>

效果圖：