CSS 基本实现

示例

什么是图片精灵？

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

例如：

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