如何设置带背景图像的按钮样式

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