基本實施

什麼是影象精靈？

影象精靈是位於影象精靈表內的單個資產。影象精靈表是一個影象檔案，其中包含可從中提取的多個資產。

例如：

上面的影象是一個影象精靈表，這些星中的每一個都是精靈表中的一個精靈。這些精靈表很有用，因為它們通過減少瀏覽器可能必須進行的 HTTP 請求的數量來提高效能。

那麼你如何實現呢？這是一些示例程式碼。

HTML

<div class="icon icon1"></div>
<div class="icon icon2"></div>
<div class="icon icon3"></div>

CSS

.icon {
    background: url(“icons-sprite.png”);
    display: inline-block;
    height: 20px;
    width: 20px;
}
.icon1 {
      background-position: 0px 0px;
}
.icon2 {
      background-position: -20px 0px;
}
.icon3 {
      background-position: -40px 0px;
}

通過使用設定精靈的寬度和高度，並使用 CSS 中的 background-position 屬性（帶有 x 和 y 值），你可以使用 CSS 輕鬆地從精靈表中提取精靈。