基本实施

什么是图像精灵？

图像精灵是位于图像精灵表内的单个资产。图像精灵表是一个图像文件，其中包含可从中提取的多个资产。

例如：

上面的图像是一个图像精灵表，这些星中的每一个都是精灵表中的一个精灵。这些精灵表很有用，因为它们通过减少浏览器可能必须进行的 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 轻松地从精灵表中提取精灵。