在 <button> 元素中嵌入图像

Question

我正在尝试在 HTML 中的 <button> 元素上显示 png 图像。该按钮与图像大小相同，图像显示但由于某种原因不在中心 - 所以不可能看到全部。换句话说，图像的右上角似乎位于按钮的中心，而不是按钮的右上角。

这是 HTML 代码：

 <button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>

更新：

我认为实际发生的是保证金问题。我得到了两个像素的边距，所以背景图像超出了按钮。按钮和图像的大小相同，只有 20px ，所以它非常引人注目……我试过 margin:0 ， padding:0 但它没有帮不上…

原文由 Amit Hagin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用输入类型图像。

 <input type="image" src="http://example.com/path/to/image.png" />

它像一个按钮一样工作，并且可以附加事件处理程序。

或者，您可以使用 css 为带有背景图像的按钮设置样式，并适当地设置边框、边距等。

 <button style="background: url(myimage.png)" ... />

原文由 Andrew Barber 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果图像是一段语义数据（例如个人资料图片），则在 --- 中使用 <img> 元素 <button> 并使用 CSS 调整 <img> 。如果图像只是使按钮视觉上令人愉悦的一种方式，请使用 CSS background-image 为 <button> 设置样式（不要使用 <img> ）。

演示：http: //jsfiddle.net/ThinkingStiff/V5Xqr/

HTML:

 <button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>

CSS：

 button {
    display: inline-block;
    height: 134px;
    padding: 0;
    margin: 0;
    vertical-align: top;
    width: 104px;
}

#close-image img {
    display: block;
    height: 130px;
    width: 100px;
}

#close-CSS {
    background-image: url( 'http://thinkingstiff.com/images/matt.jpg' );
    background-size: 100px 130px;
    height: 134px;
    width: 104px;
}

输出：

原文由 ThinkingStiff 发布，翻译遵循 CC BY-SA 3.0 许可协议