将图片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:0padding:0 ,但它没有帮助…

你可以使用inputtypes的图像。

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

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

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

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

如果图像是一个语义数据(比如一张个人资料图片),那么在你的<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; } 

输出:

在这里输入图像说明

尝试这个

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

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

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

试试这个代码:

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

它为我工作得很好。

button不直接支持图像。 此外,你正在做的方式是链接()

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

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

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

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

和平