将图像嵌入<button>元素</button>

Question

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

这是HTML代码：

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

更新：
我认为实际发生的是保证金问题。我得到一个两个像素的边距，所以背景图像是从按钮出来的。按钮和图片的大小相同，只有20px，因此非常明显......我尝试了margin:0，padding:0，但它没有帮助... < / p>

Answer 1

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

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

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

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

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

Answer 2

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

输出：

Answer 3

试试这个

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

Answer 4

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

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

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

Answer 5

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

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

Answer 6

主题为“将图像嵌入按钮元素中”，而问题使用纯HTML 。我使用span标记执行此操作的方式与在引导程序中使用glyphicons的方式相同。我的图片是16 x 16px，可以是任何格式。

以下是回答问题的纯HTML：

<button type="button"><span><img src="images/xxx.png" /></span>&nbsp;Click Me</button>

Answer 7

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

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

Answer 8

为什么不使用具有null属性的图像？

例如：

onclick

Answer 9

按钮不直接支持图像。此外，你正在做的是link（）

使用样式

中的BACKGROUND-IMAGE属性在按钮上添加图像

您还可以使用标记

指定重复和其他属性

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

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

和平