css - 如何使用 CSS Sprite ？

Question

我想弄清楚如何在具有 4 个 Sprite 的 Sprite 图像上使用 CSS Sprite 。

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

这是图片:

如何显示最后两个？如何单独显示第3个和第4个 Sprite ？

Answer 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(/image/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 中的所有图像，应该具有相同的 Canvas 大小

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