如何設置帶背景圖像的按鈕樣式

Question

我無法擺脫背景圖像的按鈕中的灰色邊框。我試圖把一起的jsfiddle公共例子，我甚至不能得到適當的例子，以工作爲圖像精靈也沒有露面：

http://jsfiddle.net/3vPpt

所以我的兩個問題是：

1）爲什麼不顯示在我的jsfiddle背景圖像

2）當我們得到精靈顯示後，我該如何擺脫原始按鈕的灰色邊框？我只想讓精靈出現。

Answer 1

Try this。

它看起來像你應用樣式的圖像元素，而不是按鈕。我懷疑你可以將背景圖像樣式應用於圖像元素，即使它是空白圖像。我認爲這可能是因爲圖像元素是內聯元素。

我也加了border：none;到按鈕，它擺脫了按鈕邊框的樣式。

請注意，您仍然可能會遇到奇怪的填充/邊距問題，但這可能是另一個問題。至少，Firefox甚至在刪除邊框後，也會在按鈕元素中應用多餘的像素填充。

Answer 2

如果它的形式使用輸入類型的圖片或只使用一個div的onclick提交

Answer 3

嘗試將「thumb_up」類應用於按鈕標記並從按鈕內移除img，如下所示。

<button class="thumb_up" onclick=";return false;" title="I LIKE" type="button" class=""> </button> 

然後添加「border：0;」到「thumb_up」CSS

.thumb_up { 
    background: no-repeat url("http://www.mattsbits.co.uk/user_media/uploaded_media/sp2010_formatmap32x32.png") 0 0; 
    width: 200px; 
    height:200px; 
    border: 0; 
}