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

Question

我想要一个带有图像的按钮.我用这个:

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

但它没有显示图像.我希望整个按钮成为图像.

Answer 1

它应该是

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

所以"形象"而不是"提交".它仍然是一个点击提交的按钮.

如果您的图像大于显示的按钮; 假设图像是200x200像素; 将其添加到样式表:

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

或直接在按钮标签中:

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

但请注意,像这样调整图像大小可能无法产生理想的结果; 如果您的图像比想要的图像小得多,您将看到单个像素; 如果另一方面它更大,你浪费了宝贵的用户带宽.因此,将图片本身调整为实际尺寸比通过样式表重新缩放更可取!

Answer 2

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

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

“<button>”元素比“<input>”元素更容易设置样式。您可以添加内部 HTML 内容（例如“<em>”、“<strong>”甚至“<img>”），然后使使用 `:after` 和 `:before` 伪元素来实现复杂的渲染，而 `<input>` 只接受文本值属性。” [来源：MDN](https://developer.mozilla.org/en/docs/Web/HTML/Element/button) (2认同)

Answer 3

您可以使用一些内联CSS

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

应该做魔术，也可能要做边界：无；摆脱标准边界。

Answer 4

使用<button>元素而不是<input type=button />