CSS - 多个图像合而为一并使用 CSS 确定背景

Question

如果您不明白我的意思，请查看此图片：

多个图像

我想知道它是如何工作的，CSS是的，但是当使用使用该图像的背景时，它到底是如何工作的，然后它完全按照它应该做的事情进行剪切 - 当确定为该图像的背景。

我很想知道如何做 - 这样我就可以把我的 CSS 水平提高一点 :P

谢谢

Answer 1

您正在寻找的是CSS Sprites，有大量的教程和方法可以实现这一点。基本上，您所做的就是声明背景并使用 background-position 来决定背景中显示的内容。

顺便说一句，CSS Sprites 非常棒，对于尝试弄清楚它们来说是一件好事。

Answer 2

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

Answer 3

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