CSS-一个图像中包含多个图像，并使用CSS确定背景

如果您不知道我的意思，请查看以下图片：

我想知道它是如何工作的，CSS是的，但是当使用一个背景使用这个图像时，它是如何工作的，然后它被完全剪切，它应该做什么-当被确定为这个图像的背景时

对我来说，知道怎么做会很有趣——这样我就可以把我的CSS级别再提高一点：p

---

谢谢

您想要的是，这里有大量的教程和实现方法。基本上，您要做的是声明一个背景，并使用

背景位置

确定背景中显示的内容

顺便说一句，CSS精灵很棒，很好地解决了它们。

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

按钮2
#按钮无、#按钮二
{
背景图像：url（/images/ALL-BUTTONS-IN-ONE-image-TILED-16PX-APART.png）；
背景重复：无重复；
宽度：16px；
高度：16px；
溢出：隐藏；
}
#钮扣
{
背景位置：0；
}
#钮扣二
{
背景位置：0-16px；
}

我只想说，这个问题应该得到更多+1，因为这是每个web开发人员都应该使用的CSS原则。

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