按钮＆gt;在＆LT嵌入图片;元件 [英] Embed image in a <button> element

问题描述

我想显示＆LT上PNG图像;按钮＆gt;在HTML 元素。
按钮的尺寸与图像相同，并且所述图像中示出，但由于某种原因不能在中心 - 所以不可能看到这一切。
换句话说，它好像图像的右上角位于按钮的中心，而不是在按钮的右上角。

I'm trying to display a png image on a <button> element in HTML. The button is the same size as the image, and the image is shown but for some reason not in the center - so it's impossible to see it all. In other words it seems like the top right corner of the image is located at the center of the button and not at the top right corner of the button.

这是HTML code：

This is the HTML code:

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

更新：结果
实际发生的事情，我想，是保证金的问题。我得到一个两象素的余量，所以背景图像是走出去的按钮。该按钮和图像的大小相同，仅 20像素，所以这是非常noticable ......我试过保证金：0 ，填充：0 ，但它并没有帮助...

Update:
What actually happens, I think, is a margin problem. I get a two pixel margin, so the background image is going out of the button. The button and the image are the same size, which is only 20px, so it's very noticable... I tried margin:0, padding:0, but it didn't help...

推荐答案

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

You could use input type image.

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

它可以作为一个按钮，可以附加给它的事件处理程序。

It works as a button and can have the event handlers attached to it.

另外，你可以使用CSS与背景图像的样式按钮，并设置边框，边距等进行适宜的。

Alternatively, you can use css to style your button with a background image, and set the borders, margins and the like appropriately.

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

这篇关于按钮＆gt;在＆LT嵌入图片;元件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！