如何使用 CSS 精灵？答案

【问题标题】：How use CSS sprites?如何使用 CSS 精灵？
【发布时间】：2019-03-19 20:12:59
【问题描述】：

我正在尝试弄清楚如何在具有 4 个精灵的精灵图像上使用 CSS 精灵。

我有显示前两个精灵的代码。我无法编写代码来显示最后两个精灵。我自己也无法显示第三个和第四个精灵。

这是图片：

如何显示最后两个？如何单独显示第三和第四个精灵？

【问题讨论】：

你有没有尝试过？向我们展示一些代码，以便我们更好地帮助您。在提问之前先做一些努力。
我上传了你的图片，所以如果图片从服务器上消失，你的问题也很有意义。我还清理了一些语言。我将带有精灵的图像称为“图像”，将单个精灵称为“精灵”。要在此站点上获得帮助，您可能需要通过共享您拥有的代码来展示您所做的工作。它不需要很高的质量，只是为了帮助社区了解你的尝试。
你可以使用sprite generator
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
how to use css sprites?的可能重复

标签： css css-sprites

【解决方案1】：

HTML

<div class="container">
    <ul>
        <li id="belt-1"></li>
        <li id="belt-2"></li>
        <li id="belt-3"></li>
        <li id="belt-4"></li>
    </ul>
</div>

CSS

.container {
    position: relative;
    width: 600px;
    height: 600px;
}

.container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.container ul li {
    background-image: url(https://i.stack.imgur.com/SBxX4.png);
    margin-bottom: 20px;
    width: 150px;
    height: 78px;
    background-size: auto 286px;
    background-position: 0 0;
}

.container ul li#belt-2 {
    background-position-y: 210px;
}

.container ul li#belt-3 {
    background-position-y: 123px;
    height: 58px;
}

.container ul li#belt-4 {
    background-position-y: 66px;
    height: 58px;
}

始终记住 CSS sprite 中的所有图像，应具有相同的画布大小

我创建了一个 CSS sprites 的基本示例，希望对您有所帮助。

【讨论】：

【解决方案2】：

这是最后两张图片的一个非常简单的示例。我建议你在this fiddle 中与.block 的width、height 和background-position 一起玩。 background 属性中的最后两个数字允许您定义将出现的图像数量。

.container {
  position: relative;
  width: 600px;
  height: 600px;
}

.container .block {
  background: url(https://i.stack.imgur.com/SBxX4.png) -85px -420px;
  width: 310px;
  height: 250px;
}

<div class="container">
  <div class="block">

  </div>
</div>

你可以在JSFiddle上玩弄它

【讨论】：