CSS - 在一个多图像和使用CSS来确定背景

Question

如果你不知道我在说什么，看看这个图片的：

多个图像

我想知道它是如何工作的，CSS是的，但究竟是如何做这一切工作了使用背景使用该图像时，然后它是所有切口都正是它应该做的 - 当确定为背景这个图像。

将是有趣的，我知道如何 - 这样我就可以把我的CSS水平更轻松一点：P

由于

Answer 1

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

Answer 2

你所寻找的是 CSS精灵，有教程和方式堆为达到这个。基本上，你在做什么是声明的背景，并使用background-position决定显示在后台的东西。

CSS精灵是伟大的方式，对于试图数字出来好工作。

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;
}