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

我想要一个有图像的按钮。我用的是：

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

但它没有显示图像。我希望整个按钮都是图像

应该是

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

或直接在按钮标签中：

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

---

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

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

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

---

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

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

---

如果你想变魔术，你也可以做一个边界：无；摆脱标准边框。

您也可以尝试类似的方法

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

---

例如，您可以使用CSS或使用图像输入设置按钮样式。此外，您还可以使用支持内联内容的

按钮
元素

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


使用
元素而不是



它可以工作。
或者在CSS样式表文件中创建一个类并使用它；o） 如果我使用你的代码，它会获取我图像的一部分，而不是整个图像，我尝试了按钮的宽度和高度…不工作，这需要很多时间，但你会尝试。。谢谢你，伙计：）@rizvan它正在工作-发布你的代码（编辑你的问题），我们会看看你哪里弄错了。@rizvan：“不工作”，你的确切意思是什么？图像是否不显示，或是否不可单击，…？是否可单击且图像部分仅可见？因此，您的问题是按钮的大小？尝试添加一些css（参见更改后的答案），但问题是如何将图像放置在按钮上（或者，有效地，如何将图像用作按钮）。“
元素比
元素更容易设置样式。您可以添加内部HTML内容（想想
，
甚至
），并使用
：after
和
：before
伪元素来实现复杂的渲染，而
仅接受文本值属性。”
.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;
 }

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

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

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