将图片embedded到<button>元素中

我试图在HTML中的<button>元素上显示一个PNG图像。 该button与图像大小相同，图像显示，但由于某种原因不在中心 – 所以不可能看到这一切。 换句话说，图片的右上angular似乎位于button的中心，而不是button的右上angular。

这是HTML代码：

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

更新：
究竟发生了什么，我认为是一个保证金问题。 我得到了一个两个像素的边缘，所以背景图像是从button。 button和图像是相同的大小，这是只有20px ，所以这是非常明显的…我试图margin:0 ， padding:0 ，但它没有帮助…

Answer 1

你可以使用inputtypes的图像。

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

它作为一个button，可以附加事件处理程序。

或者，您可以使用CSS来设置背景图像的样式，并适当地设置边框，边距等。

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

Answer 2

如果图像是一个语义数据（比如一张个人资料图片），那么在你的<button>里使用一个<img>元素，并使用CSS来调整<img>大小。 如果图像只是让button在视觉上令人愉悦的一种方式，可以使用CSS background-image来设置<button>样式（并且不要使用<img> ）。

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

HTML：

 <button id="close-image"><img src="http://thinkingstiff.comhttp://img.dovov.commatt.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.comhttp://img.dovov.commatt.jpg' ); background-size: 100px 130px; height: 134px; width: 104px; } 

输出：

Answer 3

尝试这个

  <input type="button" style="background-image:url('your_url')"/> 

Answer 4

在项目中添加名称为“图片”的新文件夹。 将一些图像放入图像文件夹。 那么它会正常工作。

 <input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48"> 

Answer 5

试试这个代码：

 <button onclick="myFunction()"><img src="your image name here.png"</button> 

它为我工作得很好。

Answer 6

button不直接支持图像。 此外，你正在做的方式是链接（）

使用样式中的BACKGROUND-IMAGE属性将图像添加到button上

您也可以使用标签指定重复和其他属性

例如：添加到button的基本图像将具有以下代码：

  <button style="background-image:url(myImage.png)"> 

和平