CSS Sprites

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 影象圖

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

從影象 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 屬性。如 colorbackground-image、displaypadding`。

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>