将图像嵌入到<button>元素中

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

这是HTML代码：

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

更新：
我认为实际发生的是利润问题。我得到两个像素的边距，因此背景图像从按钮中消失了。该按钮和图像的大小相同，这是唯一的20px，所以这是非常noticable ......我试过margin:0，padding:0但它并没有帮助...

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

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

它可以作为按钮使用，并可以附加事件处理程序。

另外，您可以使用css为背景按钮设置样式，并适当设置边框，边距等。

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

如果图片是一段语义数据（例如，个人资料图片），请<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;
}

输出：

试试这个

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

将图像放入按钮的最简单方法：

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

这将自动将按钮的大小调整为图像的大小。

为什么不使用带有onclick属性的图像？

例如：

<script>
function myfunction() {
}
</script>
<img src='Myimg.jpg' onclick='myfunction()'>

在项目中添加名称为Images的新文件夹。将一些图像放入图像文件夹。然后它将正常工作。

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

尝试这种格式，并使用“ width”属性来管理图像大小，这很简单。JavaScript也可以在element中实现。

<button><img src=""></button>

按钮不直接支持图像。此外，您的操作方式是链接（）

使用样式中的Background-image属性将图像添加到按钮上

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

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

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

和平