Html 在 <button> 元素中嵌入图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8683528/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Embed image in a <button> element
提问by Amit Hagin
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.
我正在尝试<button>在 HTML 中的元素上显示 png 图像。按钮与图像大小相同，图像显示但由于某种原因不在中心 - 因此不可能看到所有内容。换句话说，图像的右上角似乎位于按钮的中心，而不是按钮的右上角。
This is the HTML code:
这是 HTML 代码：
<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>
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...
更新：
我认为实际发生的是保证金问题。我得到了两个像素的边距，所以背景图像从按钮中消失了。按钮和图片大小相同，只有20px，所以很显眼...我试过margin:0, padding:0，但没有帮助...
回答by Andrew Barber
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.
它作为一个按钮工作，可以附加事件处理程序。
Alternatively, you can use css to style your button with a background image, and set the borders, margins and the like appropriately.
或者，您可以使用 css 用背景图像设置按钮样式，并适当地设置边框、边距等。
<button style="background: url(myimage.png)" ... />
回答by ThinkingStiff
If the image is a piece of semantic data (like a profile picture, for example), then use an <img>element inside your <button>and use CSS to resize the <img>. If the image is just a way to make a button visually pleasing, use CSS background-imageto style the <button>(and don't use an <img>).
如果图像是一段语义数据（例如个人资料图片），则<img>在您的内部使用一个元素<button>并使用 CSS 调整<img>. 如果图像只是使按钮在视觉上令人愉悦的一种方式，请使用 CSSbackground-image来设置样式<button>（不要使用<img>）。
Demo: http://jsfiddle.net/ThinkingStiff/V5Xqr/
演示：http: //jsfiddle.net/ThinkingStiff/V5Xqr/
HTML:
HTML：
<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>
CSS:
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;
}
Output:
输出：
回答by Chris P
try this
尝试这个
<input type="button" style="background-image:url('your_url')"/>
回答by Eli Davies
The simplest way to put an image into a button:
将图像放入按钮的最简单方法：
<button onclick="myFunction()"><img src="your image name here.png"></button>
This will automatically resize the button to the size of the image.
这将自动将按钮调整为图像的大小。
回答by SirFireball
Why don't you use an image with an onclickattribute?
为什么不使用带有onclick属性的图像？
For example:
例如：
<script>
function myfunction() {
}
</script>
<img src='Myimg.jpg' onclick='myfunction()'>
回答by user13617141
Try like this format and use "width" attribute to manage the image size, it is simple. JavaScript can be implemented in element too.
试试这种格式并使用“宽度”属性来管理图像大小，很简单。JavaScript 也可以在元素中实现。
<button><img src=""></button>回答by Parameswaran
Add new folder with name of Images in your project. Put some images into Images folder. Then it will work fine.
在您的项目中添加名为 Images 的新文件夹。将一些图像放入图像文件夹。然后它会正常工作。
<input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48">
回答by proctr
Buttons don't directly support images. Moreover the way you're doing is for links ()
按钮不直接支持图像。此外，你正在做的方式是链接 ()
Images are added over buttons using the BACKGROUND-IMAGE property in style
使用样式中的背景图像属性将图像添加到按钮上
you can also specify the repeats and other properties using tag
您还可以使用标签指定重复次数和其他属性
For example: a basic image added to a button would have this code:
例如：添加到按钮的基本图像将具有以下代码：
<button style="background-image:url(myImage.png)">
Peace
和平
