html - 用 CSS background-image 模拟按钮效果？

Question

我一直在寻找一些在网站上放置自定义按钮的方法，使用我自己的图像。

然后我在 Formspring 网站上发现了一些有趣的时刻。只有一个图像文件，具有按钮的所有状态 - 悬停和推动。

_{（来源：formspring.me）}

这张图片在背景上。我想知道 - CSS 是否有可能 - 改变悬停和推动时显示的背景图像的一部分？

也许你可以提供如何做到这一点的例子？

Answer 1

您应该更改background-position触发不同状态的时间。

div{
    background:url('http://cdn.formspring.me/images/global/social-fsvaf743e61c7e51b26765c392c6ee597f7994ad03f.png');
    width:191px;
    height:29px;
}

div:hover{
    background-position-y:-29px;
}

在这里检查我的 jsfiddle：http: //jsfiddle.net/ApJR9/

Answer 2

使用此代码：

#facebook{background:url('img_navsprites_hover.gif') 0 0;}
#facebook:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

Answer 3

button { background: url(../images/bg.png) 0 0 no-repeat transparent; }
button:hover { background-position: 0 20px; }
button:active { background-position: 0 40px; }

浏览器捕获不同的事件，例如鼠标悬停 (:hover) 或单击 (:active)，您可以为每个事件设置样式。