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;
    }