CSS Sprites（精靈/雪碧）技術原理和使用

摘自：http://blog.lehu.shu.edu.cn/hikui/A359743.html

雪碧圖，其實就是背景採用一張大圖，經過背景的定位來修改使用的背景，這樣作能夠提升網站的速度（加載一張圖對比加載一批圖）。

下面是轉的博文：

在分析各個網站的CSS時，咱們常常能夠看到一些網站有不少的元素共享了一張背景圖片，而這張背景圖片包含了全部這些元素須要的背景，這種技術就叫作CSS Sprites。

淘寶的css sprites

這樣作有什麼好處呢？咱們作一個簡單的實驗：
假設我須要有一個列表，每一行列表都須要一個本身的修飾符。若是使用普通的img來放置這些圖片：

<li><img src="img/01.gif" alt="img" /><a href="#">aaaaa</a></li>
    <li><img src="img/02.gif" alt="img" /><a href="#">bbbbb</a></li>
    <li><img src="img/03.gif" alt="img" /><a href="#">ccccc</a></li>
    <li><img src="img/04.gif" alt="img" /><a href="#">ddddd</a></li>
    <li><img src="img/07.gif" alt="img" /><a href="#">eeeee</a></li>

使用chrome開發者工具來監視網頁載入時的狀況就會發現，瀏覽器在載入每一張圖片的時候都會發起一個HTTP請求。過多的HTTP請求顯然對後臺是一個額外的開銷。

出現了5個HTTP請求
若是使用CSS Sprites技術，將全部的圖片合成一張圖片，那麼，這5個HTTP請求會被合成一個HTTP請求。

合併成1個HTTP請求了
這樣就能大大下降後臺服務器的開銷。

原理：
CSS Sprites是經過背景圖片外加背景圖片定位來實現的。如今作一個簡單的實驗：
在html裏面插入一個div，控制寬高都爲200px，並將一個高寬都爲20px的圖片做爲背景，並設位置爲50px 50px。
html:

<div class="part1"> </div>
css:
.part1{
            background: url(img/x.gif) no-repeat 50px 50px;
        }
 

此時的效果是這樣的：

50px 50px表示背景圖片的原點（左上角）離元素的左上角的x軸和y軸偏移都爲50px（圖上的標註可能有歧義）。當咱們將50px 50px改成0 0的時候，紅色的方塊的左上角會和div的左上角重合。
若是咱們拿一幅比div大的背景作圖片，會怎麼樣呢？
css:
background: url(img/tux.png) no-repeat 50px 50px;
和剛纔同樣，背景圖片的左上角離元素的左上角的x,y軸偏移都爲50px。圖片被擠下來了，超出的部分看不見了。


若是咱們使用負的值會怎麼樣呢？

能夠看到，圖片的頂點比元素的頂點還要往左上偏，超出的部分看不到了。可見，一個定了高寬的div就像是一個視口，經過設置背景的位置來看到背景圖片的不一樣部分。這就是CSS Sprites的原理。


使用CSS Sprites實現列表修飾：
首先將幾個小圖片合成一張大圖片，保存爲bg-group.gif：

html:

<li id="a"><a href="#">aaaaa</a></li>
    <li id="b"><a href="#">bbbbb</a></li>
    <li id="c"><a href="#">ccccc</a></li>
    <li id="d"><a href="#">ddddd</a></li>
    <li id="e"><a href="#">eeeee</a></li>

此時將img元素所有去掉。
設置CSS：
li{
            list-style: none;
            padding-left:16px;/*空出16px來顯示圖標*/
            height: 16px; /*設定好高度，讓超出部分不可見*/
            background: url(img/bg-group.gif) no-repeat;/*全部的li共享一張圖片*/
        }
#a{
            background-position:0 0;
        }
        #b{
            background-position:0 -19px;
        }
        #c{
            background-position: 0 -38px;
        }
        #d{
            background-position: 0 -58px;
        }
        #e{
            background-position: 0 -77px;
        }
設定好每一個li顯示背景的位置。這裏定位比較煩，須要拿photoshop去測量每一個部分起始的位置，其實這也是CSS Sprites最難的地方。
這樣，一個簡單的CSS Sprites就實現了。

 

順便閒扯一下，網站的靜態文件的優化對於性能優化起了很大的做用，CSS Sprites是一種優化。另一個很重要的概念是動靜分離，也就是靜態文件，好比圖片、CSS、JS之類的都放在專門的靜態服務器裏，動態的後臺代碼本身管本身運行。特別是那些用正則表達式來肯定路由的後臺，因爲正則表達式的開銷很是大，因此能不用正則分析的東西就單獨放一塊。