html5按钮背景图像状态

Question

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

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

Answer 1

是的你绝对可以使用它们.他们被称为CSS Sprites.

这是一个小提琴

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

Answer 2

是的,您可以使用按钮:焦点单击状态.刚刚在css上声明了它.

<button>Click me</button>

CSS示例:

button {
    background:yellow;
    padding:12px 40px;
    border:1px solid yellow;
    color:#454545;
}
button:focus {
    background:blue;
}

只需使用背景图像路径更改背景上的颜色值即可.

DEMO