如何使用CSS精灵？

Question

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

我有显示前两个精灵的代码。我在编写代码以显示最后两个精灵时遇到麻烦。我也无法单独显示第三和第四个精灵。

这是图像：

如何显示最后两个？ 如何单独显示第三和第四子画面？

Answer 1

这是最后两个图像的非常简单的示例。我建议您在this fiddle中玩.block的{​​{1}}，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;
}

您可以在JSFiddle上玩转它

Answer 2

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精灵中的所有图像，其画布大小应相同

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