CSS - 一张图片内放置多张图片并使用CSS确定背景

Question

如果你不知道我的意思，请看这张图片：
多图
我想知道它是如何工作的，CSS可以，但是当使用这个图像作为背景并且它被准确地剪裁时，它是如何处理的。对我来说很有趣，因为我可以更进一步提高我的CSS水平：P
谢谢。

- MacMac

---

我想说这个问题应该得到更多的 +1，因为这是每个网页开发者都应该使用的CSS原则。 - Chase Florell

Answer 1

{
    height: foo;
    width: foo;
    overflow: hidden;
    background: colour url() no-repeat 0 pixels-to-top-of-image;
}

- Quentin

Answer 2

你需要的是CSS Sprites，有很多教程和方法可以实现这一点。基本上，你正在声明一个背景，并使用background-position来决定显示什么在背景中。

顺便说一下，CSS Sprites非常好，你做得很棒。

- Sam152

Answer 3

<div id="buttonOne">Button 1</div>
<div id="buttonTwo">Button 2</div>

#buttonOne, #buttonTwo
{
    background-image: url(/images/ALL-BUTTONS-IN-ONE-IMAGE-TILED-16PX-APART.png);
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    overflow: hidden;
}

#buttonOne
{
    background-position: 0 0;
}

#buttonTwo
{
    background-position: 0 -16px;
}

- Nick Allen