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