CSS - 影像精靈

CSS 影像精靈是 Web 開發中常用的一種技術，它將多個影像組合到一個影像檔案中（精靈影像），並使用精靈影像內的座標來顯示影像。這種方法可以減少伺服器請求次數，提高網站效能。

影像精靈通常用於網站上的圖示、按鈕和其他小型圖形。然後使用 CSS 根據需要顯示精靈影像的特定部分。

如何在 CSS 中實現影像精靈？

建立精靈影像： 使用 Adobe Photoshop 等照片編輯工具，建立一個包含所有要用作精靈的單個影像的影像。
確定影像位置： 您需要精確記錄主精靈影像內所有子影像左上角的座標，這些座標稍後可在 CSS 程式碼中使用以呈現影像的該部分。
顯示影像： 使用屬性background-image在網頁中顯示精靈影像。
調整位置： 使用background-position指定精靈影像中內部影像的左上角。使用height和width屬性指定應從左上角呈現多少尺寸。

.sprite-icon {
    width: 75px; /* Set the width of the displayed image */
    height: 75px; /* Set the height of the displayed image */
    background-image: url('sprites.png'); /* Path to sprite image */
    background-position: -40px -40px; 
        /* Position of the individual image within the sprite */
}

在上面的示例中，我們首先將子影像的高度和寬度指定為 75px。然後，我們指定了精靈影像的 URL，其中包含所有內部影像。然後，我們使用 background-position 屬性將內部影像的左上角位置指定為 (-40px, -40px)。下圖顯示了根據上述值如何選擇內部影像。

img-sprite

CSS 影像精靈基本示例

以下示例演示如何使用 CSS 影像精靈從單個影像檔案顯示多個影像。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        img{
            height: 60px;
            width: auto;
            border: 3px solid;
        }
        .main{
            display: flex;
            justify-content: space-around;
        }
        .bootstrap, .html, .css {
            width: 150px;
            height: 150px;
            background-image: url('/css/images/devices.png');
            background-repeat: no-repeat;
            border: 5px solid;
        }
        .bootstrap {
            background-position: -5px -5px;
        }
        .html {
            background-position: -155px -5px;
        }
        .css {
            background-position: -277px -5px;
        }
    </style>
</head>

<body>
    <h3>Original Image</h3>
    <img src="/css/images/devices.png"/>

    <h3>Image sprites</h3>
    <div class="main">
        <div class="bootstrap"> </div>
        <div class="html"> </div>
        <div class="css"> </div>
    </div>    
</body>

</html>

CSS 影像精靈懸停效果

以下示例演示瞭如何在影像精靈上使用懸停效果，當您將滑鼠懸停在影像上時，影像會變得稍微透明。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        img{
            height: 60px;
            width: auto;
            border: 3px solid;
        }
        .main{
            display: flex;
            justify-content: space-around;
        }
        .bootstrap, .html, .css {
            width: 150px;
            height: 150px;
            background-image: url('/css/images/devices.png');
            background-repeat: no-repeat;
            border: 5px solid;
        }
        .bootstrap {
            background-position: -5px -5px;
        }
        .html {
            background-position: -155px -5px;
        }
        .css {
            background-position: -277px -5px;
        }
        .bootstrap:hover, .html:hover, .css:hover {
            opacity: 0.7;
         }
    </style>
</head>

<body>
    <h3>Original Image</h3>
    <img src="/css/images/devices.png"/>

    <h3>Image sprites</h3>
    <div class="main">
        <div class="bootstrap"> </div>
        <div class="html"> </div>
        <div class="css"> </div>
    </div>    
</body>

</html>

列印頁面