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

Question

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

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

Like this http://cdn.formspring.me/images/global/social-fsvaf743e61c7e51b26765c392c6ee597f7994ad03f.png

此图片位于背景上。我想知道 - 是否可以使用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

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

浏览器会捕获不同的事件，例如鼠标悬停（：悬停）或点击（：活动），您可以为每个事件设置样式。

Answer 3

使用此代码：

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