CSS Sprites

Created: October-16, 2018

CSS sprites 技術是一種通過在單個檔案中組合影象來減少為影象資源做出的 HTTP 請求數量的方法。

什麼是 Spirtes

Spirtes 是二維影象，其由將小影象組合成在定義的 X 和 Y 座標處的一個較大影象組成。

要從組合影象中顯示單個影象，可以使用 CSS background-position 屬性，定義要顯示的影象的確切位置。

使用 CSS 影象 Spirtes 的優點

具有許多影象的網頁，尤其是許多小影象，例如圖示，按鈕等，可能需要很長時間來載入並生成多個伺服器請求。

使用影象 Spirtes 而不是單獨的影象將顯著減少瀏覽器對伺服器的 HTTP 請求數量，這對於改善網頁的載入時間和整體網站效能非常有效。

注意： 減少 HTTP 請求的數量會對縮短響應時間產生重大影響，從而使網頁對使用者的響應速度更快。

檢視以下示例，你將看到一個明顯的區別; 第一次將滑鼠指標放在非 Spirtes 版本的瀏覽器圖示上時，懸浮影象會在一段時間後出現，因為懸停影象是在滑鼠懸停時從伺服器載入的，因為正常和懸停影象是兩個不同的影象。

在 Spirtes 版本中，由於所有影象都組合在一個影象中，因此滑鼠懸停時會立即顯示懸停影象，從而實現平滑的懸停效果。

下面解釋 Sprites 工作的整個過程。

製作影象 Spirtes

我們通過在單個影象（mySprite.png）中組合 10 個單獨的影象來製作這個 Spirtes 影象。你可以使用你喜歡的任何影象編輯工具建立自己的 Spirtes。

提示： 為簡單起見，我們使用了相同大小的圖示，並將它們彼此靠近放置，以便於計算偏移量。

從影象 Spirtes 顯示圖示

最後，利用 CSS，我們可以只顯示我們需要的影象 Spirtes 的一部分。

首先，我們將建立 .sprite 將載入我們的 Spirtes 影象的類。這是為了避免重複，因為所有專案共享相同的背景影象。

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

現在，我們必須為要顯示的每個專案定義一個類。例如，要顯示 CSS 程式碼所用的影象 Spirtes 的 Internet Explorer 圖示。

.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 */
}

現在問題出現了，我們是如何得到 background-position 畫素值的呢？讓我們來看看。第一個值是水平位置，第二個值是背景的垂直位置。由於 Internet Explorer 圖示的左上角觸及左邊緣，因此其距起點（即影象 Spirtes 的左上角）的水平距離為 0，因為它位於第 *5 個位置，*因此它與影象 Spirtes 起點的垂直距離是 4 X 50px = 200px，因為每個圖示的高度是 50px。

要顯示 Internet Explorer 圖示，我們必須將其左上角移動到起始點，即影象 Spirtes（mySprite.png）的左上角。此外，由於此圖示位於 200px 的垂直距離，我們需要將整個背景影象（mySprite.png）垂直向上移動 200px，這需要我們將該值應用為 -200px 的負數，因為負值會使其垂直向上，而正值會使其向下移動。但是，它不需要水平偏移，因為 Internet Explorer 圖示的左上角之前沒有畫素。

提示： 只需在即將到來的示例中使用屬性值，你就可以快速瞭解偏移的工作原理。 background-position

使用 CSS Image Sprite 建立導航選單

在上一節中，我們學習瞭如何從影象 Spirtes 中顯示單個圖示。這是使用影象 Spirtes 的最簡單方法，現在我們通過構建具有翻轉效果的導航選單向前邁出了一步，如例子 - B 中所示。

在這裡，我們將使用相同的 Spirtes 影象（mySprite.png）來建立導航選單。

用於導航的基礎 HTML

我們將首先建立帶有 HTML 無序列表的導航選單。

<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 cl ass="opera"><a href="#">Opera</a></li>
    <li class="safari"><a href="#">Safari</a></li>
</ul>

在導航上應用 CSS

以下部分將介紹如何將上面示例中給出的簡單無序列表轉換為使用 CSS 的基於 spite 影象的導航。

第 1 步：重置列表結構

預設情況下，HTML 無序列表顯示為專案符號。我們需要通過將 list-style-type 屬性設定為 none 來刪除預設專案符號。

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

第 2 步：為每個連結設定公共屬性

在此步驟中，我們將設定所有連結將共享的所有常見 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 步：設定每個連結的預設狀態

現在，我們必須為每個選單項定義一個類，因為影象 Spirtes 中的每個專案都有不同的 background-position。例如，Firefox 圖示位於起始點，即影象 Spirtes 的左上角，因此無需移動背景影象。因此，在這種情況下，背景的垂直和水平位置將為 0。同樣，你可以為影象 Spirtes 中的其他圖示定義背景位置。

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 步：新增連結的懸停狀態

新增懸停狀態具有與新增上述連結相同的原則。只需將它們的左上角移動到影象 Spirtes 的起點（即左上角），就像我們上面所做的那樣。你可以使用以下公式簡單地來計算 background-position ：

Vertical position of hover state = Vertical position of normal state - 50px

由於翻轉影象剛好低於預設狀態，每個圖示的高度等於 50px。圖示的懸停狀態也不需要水平偏移，因為它們的左上角之前沒有畫素。

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

好了，這是我們在整合整個過程後的最終 HTML 和 CSS 程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Sprite Navigation Menu</title>
<style type="text/css">
    ul.menu {
        list-style-type: none;
    }
    ul.menu li {
        padding: 5px;
        font-size: 16px;
        font-family: "Trebuchet MS", Arial, sans-serif;
    }
    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 */
    }
    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;
    }
    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;
    }
</style>
</head>
<body>
    <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>
</body>
</html>