将图像嵌入到<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

，但没有帮助…

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

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

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

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

Answer 4

试试这个

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

Answer 5

为什么不使用具有

onclick

属性的图像？

例如：

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

Answer 6

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

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

Answer 7

最好使用“a”标签，以免改变图像的风格

<a href="https://example.com"> <img src="./assets/logo.png"> </a>

您的情况：

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

Answer 8

主题是“在按钮元素中嵌入图像”，问题使用plain HTML。我使用 span 标签来执行此操作，就像在 bootstrap 中使用字形图标一样。我的图像是 16 x 16px，可以是任何格式。

这是回答问题的纯 HTML：

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

Answer 9

一般答案：

<button style="background: url('icons/close.png'); background-size:cover"></button>

由于当前选择的答案存在一些问题，发布此答案以节省人们的麻烦。

确保为按钮提供查看图像所需的宽度/高度，并可能添加“背景位置”属性以使图像按预期显示。

反应版本：

<button style={{backgroundImage: "url('icons/close.png')"}}></button>   

Answer 10

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

<button>

元素中实现。

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

Answer 11

要使用图像作为按钮，创建一个按钮下载按钮图像，然后在画图中打开它并记下左上角和右下角的坐标

`<Img src =" button.jpg" usemap=" #button" >.   
<map name = " # button " >.   
<area shape ="rect" coords = " Top- left , bottom right " 
href = " page you want to open by button" > `  

您可以使用多个< area>标签从一张图像创建不同的按钮。

注意：此方法有一个问题，如果您尝试更改图像的高度和宽度，像素会发生移动，并且您的按钮将无法工作

为此，可以通过 Photoshop 或任何其他照片编辑器从外部更改按钮图像大小

这就是你创建的按钮，没有java脚本和几行代码

Answer 12

按钮不直接支持图像。此外，你所做的方式是链接 ()

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

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

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

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

和平