6

如果你不明白我的意思,请查看这张图片:

多个图像

我想知道它是如何工作的,CSS 是的,但是当使用此图像使用背景时,它到底是如何工作的,然后它全部被完全剪切掉它应该做的 - 当确定为这个图像的背景时。

知道怎么做对我来说会很有趣 - 所以我可以将我的 CSS 水平提高一点:P

谢谢

4

3 回答 3

4

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

顺便说一句,CSS Sprites 很棒,很适合尝试找出它们。

于 2010-03-11T10:26:47.003 回答
3
{
    height: foo;
    width: foo;
    overflow: hidden;
    background: colour url() no-repeat 0 pixels-to-top-of-image;
}
于 2010-03-11T10:27:51.483 回答
1
<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;
}
于 2010-03-11T10:31:45.100 回答