Javascript 如何将 jpg 或 png 图像放入 HTML 中的按钮中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8488005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put a jpg or png image into a button in HTML
提问by Rizvan
I want a button with an image in it. I am using this:
我想要一个带有图像的按钮。我正在使用这个：
<input type="submit" name="submit" src="images/stack.png" />
But it does not show the image. I want the whole button to be the image.
但它不显示图像。我希望整个按钮成为图像。
采纳答案by codeling
It should be
它应该是
<input type="image" id="myimage" src="[...]" />
So "image" instead of "submit". It will still be a button which submits on click.
所以“图像”而不是“提交”。它仍然是一个点击提交的按钮。
If your image is bigger than the button which is shown; let's say the image is 200x200 pixels; add this to your stylesheet:
如果您的图片比显示的按钮大；假设图像是 200x200 像素；将此添加到您的样式表中：
#myimage {
height: 200px;
width: 200px;
}
or directly in the button tag:
或直接在按钮标签中：
<input type="image" id="myimage" style="height:200px;width:200px;" src="[...]" />
Note however that resizing the image like this might not yield ideal results; if e.g. your image is much smaller than you want it to be shown, you will see the single pixels; if on the other hand it is much bigger, you are wasting precious bandwidth of your users. So resizing the picture itself to the actual size is preferrable over rescaling via stylesheets!
但是请注意，像这样调整图像大小可能不会产生理想的结果；例如，如果您的图像比您希望显示的要小得多，您将看到单个像素；另一方面，如果它更大，则您正在浪费用户的宝贵带宽。因此，将图片本身调整为实际大小比通过样式表重新缩放更可取！
回答by nikc.org
You can style the button using CSS or use an image-input. Additionally you might use the buttonelement which supports inline content.
您可以使用 CSS 设置按钮样式或使用图像输入。此外，您可以使用button支持内联内容的元素。
<button type="submit"><img src="/path/to/image" alt="Submit"></button>
回答by eas
Use <button>element instead of <input type=button />
使用<button>元素代替<input type=button />
回答by MartinElvar
You can use some inline CSS like this
你可以像这样使用一些内联 CSS
<input type="submit" name="submit" style="background: url(images/stack.png); width:100px; height:25px;" />
Should do the magic, also you may wanna do a border:none; to get rid of the standard borders.
应该做魔术，你也可能想做一个边框：无；摆脱标准边界。
回答by GustyWind
you can also try something like this as well
你也可以尝试这样的事情
<input type="button" value="text" name="text" onClick="{action}; return false" class="fwm_button">
and CSS class
和 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;
}
An example is given here
回答by Royi Namir
This may work for you, try it and see if it works:
这可能对你有用，试试看是否有效：
<input type="image" src="/library/graphics/cecb2.gif">
回答by vikas agrahari
<input type= "image" id=" " onclick=" " src=" " />
it works.
有用。
回答by Hammad Hassan
<a href="#">
<img src="p.png"></img>
</a>
