在 <button> 元素中嵌入图像

Posted 2023-02-22

【中文标题】在 <button> 元素中嵌入图像

【英文标题】：Embed image in a <button> element

【发布时间】：2012-01-30 19:06:41

【问题描述】：

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

这是 HTML 代码：

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

更新： 我认为实际发生的是边际问题。我得到了两个像素的边距，所以背景图像超出了按钮。按钮和图片大小一样，只有20px，所以很显眼……我试过margin:0，padding:0，但是没用……

【问题讨论】：

对我来说，它工作得很好......你正在经历这件事的背景是什么？可以再发布几行代码吗？

您能否在实时站点上重现此内容，例如 JS Fiddle，以便我们查看发生了什么？

【参考方案1】：

一般答案：

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

由于当前选择的答案存在一些问题，发布此答案为大家省事。

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

反应版本：

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

【参考方案2】：

要将图像用作按钮，请创建按钮下载按钮图像，然后在绘图中打开它并记下左上角和右下角坐标

`<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" > `  

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

注意：此方法存在一个问题，即如果您尝试更改图像的高度和宽度，像素会发生偏移，您的按钮将不起作用

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

就是这样，您已经创建了没有 java 脚本和几行代码的按钮

【参考方案3】：

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

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

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

【参考方案4】：

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

这是回答问题的纯 HTML：

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

【参考方案5】：

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

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

【讨论】：

嵌套交互元素将无法通过可访问性检查。 （如果它是公共站点，请不要使用它！）。来源：dequeuniversity.com/rules/axe/4.3/…

【参考方案6】：

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

例如：

<script>
function myfunction() 

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

【讨论】：

这应该避免。一个快速、肮脏的黑客，当然，但没有考虑到可访问性。

【参考方案7】：

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

<input type="image" src="~/Images/Desert.jpg"   >

【参考方案8】：

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

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

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

或者，您可以使用 css 为按钮设置背景图片的样式，并适当地设置边框、边距等。

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

【讨论】：

...并且不需要 JavaScript 来提交表单。

-1：“应该”这个词太强了，因为这不是 <input type="image"> 的真正用途。为什么不推荐 CSS？

我更喜欢使用按钮。如果我找不到答案，我会这样做。谢谢

别忘了按钮元素的起始和结束标记都是必需的，所以技术上 是无效的，它应该是 。

如果您使用 CSS 方法，一个问题是您可能还想指定 background-size: cover 以使图像覆盖按钮。我一直在想为什么我的图像没有显示出来，直到我意识到只有透明的左上角实际上在按钮内......

【参考方案9】：

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

输出：

【讨论】：

@ThinkingStiff <image> 元素？我认为您的意思是 <img> 在您的文字中；）

感谢您的好回答！！但问题仍然存在......我稍微更新了这个问题 - 也许它可以帮助你更好地理解它。

@AmitHagin 我看到了你的更新。请记住，按钮有边框，它们包含在其高度的计算中。所以要适应20px 高图像，按钮高度必须是24px。

@AmitHagin 另外，为防止出现空格问题，请将您的 <img> 更改为 display: block;。我更新了演示链接以显示这一点。

对这种方法的可访问性/替代文本有任何顾虑吗？我真的很生疏，但是通过将文本偏移几千像素来隐藏文本仍然是公认的解决方法吗？

【参考方案10】：

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

使用样式中的背景图像属性将图像添加到按钮上

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

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

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

和平

【讨论】：

你的回答不正确，官方documentation说是允许的。

【参考方案11】：

试试这个

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