html - 在 元素中嵌入图像

Question

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

这是 HTML 代码:

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

更新:
我认为实际发生的是 margin 问题。我得到了两个像素的边距，所以背景图像超出了按钮。按钮和图片大小一样，只有20px ，所以它很明显......我试过margin:0 , padding:0 , 但它没有帮助...

Answer 1

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

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

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

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

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