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

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

Answer 3

我认为将它们分成两个文件是最容易的（例如，FirstBackground.png和SecondBackground.png）。然后你可以使用以下CSS：

button {
  background: url("/images/FirstBackground.png") no-repeat bottom;
}

button:active { 
    background: url(/images/SecondBackground.png) no-repeat bottom; 
} 

希望这有帮助。

Answer 4

当然，它就像精灵......你可以像这样使用背景中的位置

<强> HTML

<button> </button>  <!-- Without the "Click Me" -->

<强>的CSS：

button {
    background-image:url('http://i.stack.imgur.com/BSVeQ.gif');
    height:64px;
    width:196px;
}

button:active {background-position: 0 -64px; }

当图像的高度为128px时，请将其设为64px并在悬停或其他状态时使用位置......

<强> DEMO

Answer 5

CSS Sprites

正如其他答案所指出的，当处理具有各种状态的按钮并且依赖于图像资源的使用时，CSS精灵通常是个好主意。对于一些示例，以及关于为什么CSS sprites技术有用的评论，我建议从CSS-Tricks中查看以下文章：http://css-tricks.com/css-sprites/

是否有必要使用图像？

我假设您的问题中的示例图像有点做作。如果没有，我建议不要使用背景图像。今天的CSS非常强大，您可以使用它来制作非常漂亮的按钮，根本不需要图像。如果你想使用一些简单的背景颜色，渐变，圆角等等 - 这些都可以单独使用CSS。此外，该按钮的文本/ CSS解决方案增加了其可访问性。