Question

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

Multiple images

我想知道它是如何工作的，CSS是的，但确切地说，当使用这个图像使用背景时它是如何工作的然后它全部完全切割它应该做的 - 当被确定为背景时这个形象。

让我知道如何有趣 - 所以我可以把我的CSS级别提高一点：P

由于

Answer 1

您正在寻找的是CSS Sprites，有很多教程和方法可以实现这一目标。基本上你正在做的是声明一个背景并使用background-position来决定在后台显示什么。

顺便说一句，CSS Sprites很棒，很适合尝试解决这些问题。

Answer 2

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

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

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

3 个答案: