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

浏览器会捕获不同的事件，如mouseover（：hover）或click（：active），您可以为每个事件设置样式。

Answer 3

使用此代码：

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