css sprites（精靈圖）如何使用？

CSS Sprites是一種性能優化技術，一種網頁圖片應用處理方式：將多個圖像組合成單個圖像文件以在網站上使用的方法，以提高性能；也被稱為css 精靈圖。

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

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

這樣可以減少對服務器的調用、減少呈現網頁所需的下載次數，節省帶寬並縮短用戶端的下載時間，減少網絡擁塞。

 

如何使用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>

 

效果圖：