CSS Sprites(精靈圖)

CSS Sprites技術(shù)是一種通過將圖像合并到單個文件中來減少對圖像資源發(fā)出的HTTP請求數(shù)量的方法。

什么是精靈圖

子畫面是二維圖像，由在定義的X和Y坐標(biāo)下將小圖像組合成一個大圖像組成。

要顯示組合圖像中的單個圖像，可以通過使用CSS background-position屬性，定義要顯示的圖像的確切位置。

使用CSS Image Sprite的優(yōu)勢

具有許多圖像，尤其是許多小圖像（例如圖標(biāo)，按鈕等）的網(wǎng)頁可能需要很長時間才能加載并生成多個服務(wù)器請求。

使用圖像精靈而不是單獨(dú)的圖像將大大減少瀏覽器向服務(wù)器發(fā)出的HTTP請求數(shù)量，這對于縮短網(wǎng)頁的加載時間和網(wǎng)站的整體性能非常有效。

查看以下示例，您將看到一個明顯的不同。當(dāng)您第一次將鼠標(biāo)指針放在非Sprite版本的瀏覽器圖標(biāo)上時，將在一段時間后出現(xiàn)懸停圖像，這是因?yàn)閼彝D像是在鼠標(biāo)懸停時從服務(wù)器加載的，因?yàn)檎D像和懸停圖像都是兩個不同的圖像。

而在Sprite版本中，由于所有圖像都合并在一個圖像中，因此鼠標(biāo)懸停時會立即顯示懸停圖像，從而產(chǎn)生平滑的懸停效果。使用CSS Sprite后，用戶通過訪問合成的圖像，可以減少HTTP請求次數(shù)，文件總大小也將縮小，可以提高訪問的效率。

使圖像精靈

我們通過將10張單獨(dú)的圖像組合到一個圖像（mySprite.png）中來制作此sprite圖像。您可以使用任何喜歡的圖像編輯工具來創(chuàng)建自己的精靈。

從圖像精靈顯示圖標(biāo)

最后，利用CSS，我們可以僅顯示所需圖像精靈的一部分。

首先，我們將創(chuàng)建.sprite將加載精靈圖像的類。這是為了避免重復(fù)，因?yàn)樗许?xiàng)目共享相同的背景圖像。

.sprite {
    background: url("images/mySprite.png") no-repeat;
}

現(xiàn)在，我們必須為要顯示的每個項(xiàng)目定義一個類。例如，要顯示Internet Explorer圖標(biāo)的形式，圖像精靈將是CSS代碼。

.ie {
    width: 50px; /* Icon width */
    height: 50px; /* Icon height */
    display: inline-block; /* Display icon as inline block */
    background-position: 0 -200px; /* Icon background position in sprite */
}

現(xiàn)在出現(xiàn)了問題，我們?nèi)绾潍@得這些像素值background-position？讓我們找出答案。第一個值是背景的水平位置，第二個是背景的垂直位置。由于Internet Explorer圖標(biāo)的左上角接觸到左邊緣，因此它與起點(diǎn)的水平距離（即圖像精靈的左上角）為0，并且由于它位于第5個位置，因此其與起點(diǎn)的垂直距離圖片精靈的位置是4 X 50px = 200px，因?yàn)槊總€圖標(biāo)的高度均為50px。

要顯示Internet Explorer圖標(biāo)，我們必須將其左上角移動到起點(diǎn)，即圖像精靈（mySprite.png）的左上角。另外，由于此圖標(biāo)的垂直距離為200px，因此我們需要將整個背景圖像（mySprite.png）垂直向上移動200px，這要求我們將值應(yīng)用為負(fù)數(shù)-200px，因?yàn)樨?fù)值會使它垂直向上移動，而正值會使它向下移動。但是，它不需要水平偏移，因?yàn)镮nternet Explorer圖標(biāo)的左上角之前沒有像素。

使用CSS Image Sprite創(chuàng)建導(dǎo)航菜單

在上一節(jié)中，我們學(xué)習(xí)了如何顯示圖像精靈中的單個圖標(biāo)。這是使用圖像精靈的最簡單方法，現(xiàn)在我們將通過構(gòu)建一個具有翻轉(zhuǎn)效果的導(dǎo)航菜單向前邁出一步。

在這里，我們將使用相同的精靈圖像（mySprite.png）創(chuàng)建導(dǎo)航菜單。

導(dǎo)航基礎(chǔ)HTML

我們將從創(chuàng)建帶有HTML 無序列表的導(dǎo)航菜單開始。

<ul class="menu">
    <li class="firefox"><a href="#">Firefox</a></li>
    <li class="chrome"><a href="#">Chrome</a></li>
    <li class="ie"><a href="#">Explorer</a></li>
    <li class="opera"><a href="#">Opera</a></li>
    <li class="safari"><a href="#">Safari</a></li>
</ul>

在導(dǎo)航上應(yīng)用CSS

以下各節(jié)將介紹如何使用CSS將上面示例中給出的簡單無序列表轉(zhuǎn)換為基于惡意圖像的導(dǎo)航。

步驟1：重置列表結(jié)構(gòu)

默認(rèn)情況下，HTML 無序列表顯示為項(xiàng)目符號。我們需要通過將list-style-type屬性設(shè)置為來刪除默認(rèn)的項(xiàng)目符號none。

ul.menu {
    list-style-type: none;
}
ul.menu li {
    padding: 5px;
    font-size: 16px;
    font-family: "Trebuchet MS", Arial, sans-serif;
}

步驟2：為每個鏈接設(shè)置通用屬性

在這一步中，我們將設(shè)置所有鏈接都將共享的所有公共CSS屬性。如：color，background-image，display，padding等。

ul.menu li a {
    height: 50px;
    line-height: 50px;
    display: inline-block;
    padding-left: 60px; /* To sift text off the background-image */
    color: #3E789F;
    background: url("images/mySprite.png") no-repeat; /* As all link share the same background-image */
}

步驟3：設(shè)置每個鏈接的默認(rèn)狀態(tài)

現(xiàn)在，我們必須為每個菜單項(xiàng)定義一個類，因?yàn)閳D像精靈中的每個項(xiàng)都有不同的background-position。例如，F(xiàn)irefox圖標(biāo)位于圖像精靈的起點(diǎn)即左上角，因此不需要移動背景圖像。因此，在這種情況下背景的垂直和水平位置將為0。類似地，您可以為圖像精靈內(nèi)的其他圖標(biāo)定義背景位置。

ul.menu li.firefox a {
    background-position: 0 0;
}
ul.menu li.chrome a {
    background-position: 0 -100px;
}
ul.menu li.ie a {
    background-position: 0 -200px;
}
ul.menu li.safari a {
    background-position: 0 -300px;
}
ul.menu li.opera a {
    background-position: 0 -400px;
}

步驟4：添加鏈接的懸停狀態(tài)

添加懸停狀態(tài)與添加上述鏈接具有相同的原理。只需將它們的左上角移動到圖像精靈的起點(diǎn)（即，左上角）即可，就像我們上面所做的那樣。您可以background-position使用以下公式簡單地計算：

懸停狀態(tài)的垂直位置 = 正常狀態(tài)下的垂直位置 - 50px

由于鼠標(biāo)懸停圖像剛好在默認(rèn)狀態(tài)之下，因此每個圖標(biāo)的高度均等于50px。圖標(biāo)的懸停狀態(tài)也不需要水平偏移，因?yàn)樵趫D標(biāo)的左上角之前沒有像素。

ul.menu li.firefox a:hover {
    background-position: 0 -50px;
}
ul.menu li.chrome a:hover {
    background-position: 0 -150px;
}
ul.menu li.ie a:hover {
    background-position: 0 -250px;
}
ul.menu li.safari a:hover {
    background-position: 0 -350px;
}
ul.menu li.opera a:hover {
    background-position: 0 -450px;
}

做完了！結(jié)合了整個過程之后，這是我們最終的HTML和CSS代碼：