css - html5 按钮背景图像状态

Question

我有一个按钮，我正在尝试将此图像应用到它的背景中，绿色是关闭状态，黄色是点击状态。我可以在两个状态都在同一个文件中的情况下使用此图像，还是需要将它们分开？这种情况的标准是什么，css是如何工作的？

<button>click me</button>
button {
    background-image:url('button.png');
}

Answer 1

是的，您绝对可以使用它们。它们称为 CSS Sprites。

这是一个 fiddle

button{
    width:196px;
    height:64px;
    background-image:url("http://i.stack.imgur.com/BSVeQ.gif");
    background-repeat:no-repeat;
}
button:active{
    background-position:0px -64px;
}