如何将 jpg 或 png 图像放入 HTML 中的按钮答案

【问题标题】：How to put a jpg or png image into a button in HTML如何将 jpg 或 png 图像放入 HTML 中的按钮
【发布时间】：2012-01-19 06:07:13
【问题描述】：

我想要一个带有图像的按钮。我正在使用这个：

<input type="submit" name="submit" src="images/stack.png" />

但它不显示图像。我希望整个按钮成为图像。

【问题讨论】：

标签： javascript html

【解决方案1】：

你可以像这样使用一些内联 CSS

<input type="submit" name="submit" style="background: url(images/stack.png); width:100px; height:25px;" />

应该做魔法，你也可能想做一个边框：无；摆脱标准边框。

【讨论】：

或者在你的 CSS 样式表文件中创建一个类并使用它；o)
如果我使用你的代码，它会占用我的图像的一部分而不是整个图像，我尝试使用按钮的宽度和高度...不工作
这需要很多时间，但你们会努力的......谢谢老兄:)

【解决方案2】：

<input type= "image" id=" " onclick=" " src=" " />

它有效。

【讨论】：

【解决方案3】：

应该是

<input type="image" id="myimage" src="[...]" />

所以“图像”而不是“提交”。它仍然是一个点击提交的按钮。

如果您的图像大于显示的按钮；假设图像是 200x200 像素；将此添加到您的样式表中：

#myimage {
    height: 200px;
    width: 200px;
}

或直接在按钮标签中：

<input type="image" id="myimage" style="height:200px;width:200px;" src="[...]" />

但是请注意，像这样调整图像大小可能不会产生理想的结果；如果例如您的图像比您希望显示的要小得多，您将看到单个像素；另一方面，如果它更大，那么您正在浪费用户宝贵的带宽。因此，将图片本身调整为实际大小比通过样式表重新缩放更可取！

【讨论】：

@rizvan 它正在工作 - 发布您的代码（编辑您的问题），我们会看看您哪里出错了。
@rizvan：“不工作”是什么意思？图片是没有显示出来，还是不能点击，...？
是的，它的可点击和部分图像仅可见
所以你的问题是按钮的大小？尝试添加一些 css（请参阅更改的答案）

【解决方案4】：

<a href="#">
        <img src="p.png"></img>
    </a>

【讨论】：

【解决方案5】：

您可以使用 CSS 或使用图像输入来设置按钮样式。此外，您可以使用支持内联内容的 button 元素。

<button type="submit"><img src="/path/to/image" alt="Submit"></button>

【讨论】：

"<button> 元素比 <input> 元素更容易设置样式。您可以添加内部 HTML 内容（例如 <em>、<strong> 甚至 <img>），并利用:after 和 :before 伪元素来实现复杂的渲染，而 <input> 只接受文本值属性。” Source: MDN

【解决方案6】：

使用<button> 元素代替<input type=button />

【讨论】：

【解决方案7】：

这可能对你有用，试试看它是否有效：

<input type="image" src="/library/graphics/cecb2.gif">

【讨论】：

【解决方案8】：

你也可以试试这样的

<input type="button" value="text" name="text" onClick="{action}; return false" class="fwm_button">

和 CSS 类

.fwm_button {
   color: white;
   font-weight: bold;
   background-color: #6699cc;
   border: 2px outset;
   border-top-color: #aaccff;
   border-left-color: #aaccff;
   border-right-color: #003366;
   border-bottom-color: #003366;
 }

举个例子here

【讨论】：

但问题是如何将图像放在按钮上（或者，实际上，如何将图像用作按钮）。