表单按钮在未按下和按下状态下都有一个 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'">
我认为在其上使用文本是不可能的（就我所尝试的而言）。然后我尝试使用<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'});">
这应该使您能够将图像放入带有一些文本覆盖的按钮中。
【讨论】：
.mybutton { background-image: url('normal') } .mybutton:active { background-image: url('pressed.png') }
为什么不只使用 css 和“提交”类型？
<input type="submit" class="myButton" value="Label goes here" />
然后在你的 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');
}
这同样适用于“按钮”类型，并且优于 Javascript 版本，因为不必启用 Javascript。
为了让这个在 IE 中正常工作，你可以使用this script 让 IE 自己运行 :)
【讨论】：
<input type="image"> 旨在将某种图像映射作为按钮。提交后，它会向服务器端发送一个name.x 和name.y 参数，表示客户端在图像地图上按下的确切位置。
你显然不想拥有它。您只想拥有一个带有背景图片的按钮。为此，您通常使用 CSS background-image 属性（或者更方便的是 background 属性）。
基本示例：
.mybutton {
background-image: url('normal.png');
width: 175px;
height: 60px;
}
.mybutton.pressed {
background-image: url('pressed.png');
}
普通按钮如下：
<input
type="submit"
class="mybutton"
value=""
onmousedown="this.className+=' pressed'"
onmouseup="this.className=this.className.replace(' pressed', '')"
>
编辑：对于 downvoters 或 JS/jQuery nitpickers：IE lte 7 确实 不 支持 :hover 或 :active 在除 a 之外的其他元素上的伪选择器元素。上述解决方案是跨浏览器兼容的。
【讨论】：