如何将 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>

Answer 3

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

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

应该可以发挥魔力，你也可能想做一个 border:none;摆脱标准边框。

Answer 4

使用 元素而不是

Answer 5

你也可以尝试这样的方法

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

和 CSS class

.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;
 }

这里给出了一个例子

Answer 6

这可能对您有用，尝试一下，看看是否有效：

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

Answer 7

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

有用。

Answer 8

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