Question

我无法摆脱具有背景图像的按钮中的灰色边框。我试图在jsfiddle上组合一个公共示例，我甚至无法得到一个正确的例子，因为图像精灵也无法显示：

http://jsfiddle.net/3vPpt

所以我的两个问题是：

1）为什么背景图片不会出现在我的jsfiddle

中

2）在我们让sprite出现之后，如何摆脱原始按钮的灰色边框？我只想要精灵出现。

Answer 1

Try this

看起来您正在将样式应用于图像元素，而不是按钮。我怀疑你可以将背景图像样式应用于图像元素，即使它是一个空白图像。我想这可能是因为图像元素是内联元素。

我还添加了border：none;按钮，摆脱按钮边框样式。

请注意，您仍然可能会遇到奇怪的填充/边距问题，但这可能是另一个问题。至少Firefox，即使在删除边框后也喜欢在按钮元素中应用额外的几个像素填充。

Answer 2

如果它的表单使用输入类型图像...或只是使用带有onclick的div来提交

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

如何设置按钮与背景图像

3 个答案: