Html 使用图像作为提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5283360/
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
Using an image as a submit button
提问by Pieter
If I want to make my own clickable buttons, I can do this:
如果我想制作自己的可点击按钮，我可以这样做：
<a href="javascript:;" class="button">Sign up</a>
Where CSS rules for a.buttoncauses the link to be shown as a button. If I apply the same trick to <input type="submit" />, I get the button image but it is shown on top of the default submit button and the cursor doesn't change to a hand like it does on <a>tags.
其中 CSS 规则a.button导致链接显示为按钮。如果我对 应用相同的技巧<input type="submit" />，我会得到按钮图像，但它显示在默认提交按钮的顶部，并且光标不会像在<a>标签上那样变成一只手。
How can I fix this behavior?
我该如何解决这种行为？
采纳答案by Jon
You can use appropriate CSS properties such as
您可以使用适当的 CSS 属性，例如
border: none;
background: transparent;
cursor: pointer;
to remove the default styles from your input type="submit"button.
从input type="submit"按钮中删除默认样式。
回答by kapa
You could use an input type="image"instead.
你可以用一个input type="image"代替。
It is used like this:
它是这样使用的：
<input type="image" src="{your image}" alt="{alternate text}" />
回答by Gergely Fehérvári
<button id="bar" type="submit"><img src="foo.img" /></button>
this creates a submit button with an image inside.
这将创建一个带有图像的提交按钮。
and if you want to change the cursor when you mouseover the cursor use this css.
如果您想在将鼠标悬停在光标上时更改光标，请使用此 css。
button#bar:hover{cursor:pointer}
回答by David says reinstate Monica
It's easy enough, to use an <input type="submit" />:
使用一个很容易<input type="submit" />：
input[type=submit] {
background: transparent url("path/to/image.jpg") 0 0 no-repeat;
font-weight: bold;
display: inline-block;
text-align: center;
cursor: pointer;
height: 331px; /* height of the background image */
width: 500px; /* width of the background image */
border: 5px solid #fff;
border-radius: 4em;
}
