CSS Sprites(CSS 精靈)

一.什麼是CSS Sprites?

　　一般css精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位。

二.使用CSS Sprites的優缺點

優點：

1.很好地減少網頁的http請求，從而大大的提高頁面的效能。

2.減少圖片的字節，多張圖片合併成1張圖片的位元組總是小於多張圖片的位元組總和。

3.解決了在圖片命名上的困擾。

缺點：

1.在圖片合併的時候，要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景；

2.在寬屏，高分辨率的屏幕下的自適應頁面，如果圖片不夠寬，很容易出現背景斷裂；

3..CSS Sprites在開發時，要測量計算每個背景單元的精確位置，建議使用CSS Sprites 樣式產生工具。

4.CSS Sprites在維護時，如果頁面背景有少許改動，一般就要改這張合併的圖片。

總結：一般CSS Sprites拼合佈局用於局部小盒子佈局不適合大背景大佈局背景使用。例如小局部佈局小圖示背景、小導航背景等CSS佈局。總之很多時候大家要權衡利弊，再決定是不是應用CSS Sprites。

三.舉個栗子

一張Emoji的圖片

         

 最終效果：

html代碼：

    <ul>
        <li class="Emoji1"></li>
        <li class="Emoji2"></li>
        <li class="Emoji3"></li>
        <li class="Emoji4"></li>
    </ul>

css代碼：

*{
        margin: 0px;
    }
    ul,li{
        list-style: none;
    }
    li{
        width:50px;
        height:50px;
        overflow: hidden;
        background: url('Emoji.jpg') -0px -0px no-repeat;
    }
     .Emoji1{
        background-position: -0px -0px;
    }
    .Emoji2{
        background-position: -0px -50px;
    }
    .Emoji3{
        background-position: -0px -100px;
    }
    .Emoji4{
        background-position: -0px -150px;
    }