一，什么是css精靈圖？

引用百度百科的原話，CSS Sprites在國內(nèi)很多人叫css精靈，是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去。

二，為什么要使用css精靈圖？

使用css精靈圖主要有兩點好處；
1.讓小圖（小圖標），既請求一次大圖，得到所有小圖實現(xiàn)一次請求，減少對服務(wù)器的請求速度，避免網(wǎng)頁造成延遲。
2.方便對小圖（小圖標）的管理。

三，如何制作并使用css精靈圖？

主要分為兩部分：

1.使用ps制作精靈圖；

步驟演示:

1. 新建一個透明的圖層。

             圖1

1. 使用alt+鼠標滾動鍵，放大圖層。
2. 新建參考線；   

             圖2
在實際測量小圖大致寬高后，就開始建立參考線。比如，我的小圖大致為25px*25px（寬高不超過25px*25px）。所以，我在參考線取向上水平方向建立了3條參考線（25像素、50像素、75像素）；垂直方向建立了3條參考線（25像素、50像素、75像素）。
 
            圖3　　　　　

1. 依次放入各個小圖（小圖標）；

　　　　       　圖4
 
 
2.使用css和html代碼顯示精靈圖的各個小圖。

步驟演示：

 2-1.引入圖片；（紅色框內(nèi)為主要代碼）

 
             圖5
代碼如下：
.jlt {
       background-image: url(../images/jlt.png);
       background-repeat: no-repeat;
       display: inline-block;
       width: 25px;
       height: 25px;
       vertical-align: bottom;
       margin-bottom: -5px;
}

2-2.利用css定位，定位各個小圖。

代碼如下：
.f1 {
      background-position: 0px 0px;
}
 
.f2 {
      background-position: -25px 0px;
    }
.f3 {
      background-position: 0px -25px;
}

2-3.使用html代碼，使小圖顯示。

代碼如下：

 

3-3.最終效果展示。


                   圖6
 

四，總結(jié)：

                                         圖7
 
由圖7得，根據(jù)各個比較，最后得出：當背景定位為0px 0px時；得到原點。改變數(shù)字就得到各個軸上的圖片；
當?shù)谝粋€數(shù)字是正數(shù)時，為空（以原點為起始點，向左移動）；當我第一個數(shù)字為負數(shù)時（以起點為原點，向右移動）。
當?shù)诙€數(shù)字為正數(shù)時，為空（以原點為起始點，向左移動）；當我第二個數(shù)字為負數(shù)時（以起點為原點，向下移動）。
因此，第一個數(shù)字控制左右（正為左，負為右）；第二個數(shù)字控制上下（正為上，負為下）；原點的上方和左方都沒有圖標，所以為空。
Ps：如果我要得到白色襪子的話，數(shù)字為（-50px 0px）;如果我要黃色襪子的話，數(shù)字為（-50px -25px）。
溫馨提示：使用行內(nèi)元素是無法顯示圖片的。

做賬：