Html 带有自定义图像和文本的表单按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1811465/
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
Form Button with custom image and text
提问by smont
A form button has a 170x60 image for the non-pressed and pressed states. What I can't seem to do is get There to be text in the button. I really want to avoid having to edit the image and write text to it directly. Right now I'm using:
表单按钮具有用于非按下和按下状态的 170x60 图像。我似乎无法做的是让按钮中有文字。我真的很想避免编辑图像并直接向其写入文本。现在我正在使用：
<input type="image" src="img/button_normal.png"
width="175" height="60" onmousedown="this.src='img/button_pressed2.png'"
onmouseup="this.src='img/button_normal.png'">
I figured that it is impossible to make this work with text on top of it (as far as I have tried). So then I tried using <button>but I couldn't get it to work either.
我认为在它上面加上文本是不可能的（就我尝试过的而言）。然后我尝试使用，<button>但我也无法让它工作。
I have been able to put text over the image above, but where the text is, the button is unclickable, which doesn't work.
我已经能够将文本放在上面的图像上，但是文本所在的位置，按钮不可点击，这不起作用。
What is a solution to this problem?
这个问题的解决方案是什么？
采纳答案by Inaimathi
So why not just edit the background image on a regular button?
那么为什么不直接在常规按钮上编辑背景图像呢？
<script type="text/javascript" src="picker/js/jquery.js"></script>
<!-- some time later -->
<input type="button" src="img/button_normal.png"
width="175" height="60" value="Some Text"
onmousedown="$(this).css({'background-image': 'img/button_pressed2.png'});"
onmouseup="$(this).css({'background-image': 'img/button_normal.png'});">
That should give you the ability to put an image into a button with some text overlaid.
这应该使您能够将图像放入带有一些文本覆盖的按钮中。
回答by BalusC
The <input type="image">is meant to have sort of an image map as button. When submitted, it sends a name.xand name.yparameter to the server side which denotes the exact location where the client has pressed on the image map.
这<input type="image">意味着将某种图像映射作为按钮。提交后，它会向服务器端发送一个name.xandname.y参数，该参数表示客户端在图像地图上按下的确切位置。
You obviously don't want to have that. You just want to have a button with a backgroundimage. For that you normally use the CSS background-imageproperty for (or, more conveniently, the backgroundproperty).
你显然不想拥有它。您只想拥有一个带有背景图像的按钮。为此，您通常使用 CSSbackground-image属性（或更方便地，background属性）。
Basic example:
基本示例：
.mybutton {
background-image: url('normal.png');
width: 175px;
height: 60px;
}
.mybutton.pressed {
background-image: url('pressed.png');
}
with the normal button as follows:
使用普通按钮如下：
<input
type="submit"
class="mybutton"
value=""
onmousedown="this.className+=' pressed'"
onmouseup="this.className=this.className.replace(' pressed', '')"
>
Edit: for downvoters or JS/jQuery nitpickers: IE lte 7 does notsupport the :hovernor :activepseudoselectors on other elements than the aelement. The above solution is crossbrowser compatible.
编辑：用于downvoters或JS / jQuery的nitpickers：IE LTE 7不会不支持:hover也不:activepseudoselectors上的其他元素比a元件。上述解决方案是跨浏览器兼容的。
回答by Brendan Long
Why not just use css and a "submit" type?
为什么不只使用 css 和“提交”类型？
<input type="submit" class="myButton" value="Label goes here" />
Then in your CSS:
然后在你的 CSS 中：
input.myButton{
background-image: url('img/button_normal.png');
border-style:none;
}
input.myButton:hover{
background-image: url('img/button_pressed2.png');
}
input.myButton:active{
background-image: url('img/button_normal.png');
}
This will work just as well with "button" type, and has an advantage over Javascript versions because Javascript doesn't have to be enabled.
To make this work properly in IE, you can use this scriptto make IE behave itself :)
这与“按钮”类型一样有效，并且比 Javascript 版本具有优势，因为不必启用 Javascript。
要使其在 IE 中正常工作，您可以使用此脚本使 IE 自行运行:)
