4

我一直在尝试使用图像设置提交按钮的样式。我会使用 CSS，但按钮设计过于复杂。我尝试将背景图像添加到按钮，但图像位置错误。我也尝试过使用

<input type="image" src="myimage.png">

但唉，这不是一个提交按钮，所以它不起作用。我已经查看并尝试了所有我认为可能的方法，但找不到使按钮提交表单的解决方案。谢谢。

4

5 回答 5

4

如果<input type="image">没有按预期工作，请尝试

<button type="submit"><img src="myimage.png"></button>

但是正如我在上面写的评论一样，您的代码也应该可以正常工作

于 2012-04-26T08:34:40.163 回答
3

提交按钮有不同的可能性：

<input type="image">
<input type="submit">
<button></button> <!-- no type needed, since submit is the default type -->

这些都是提交按钮。选择最适合您的那个。

现在您可以选择在按钮之间放置图像或使用背景图像并正确定位它们。

带有背景图像的按钮示例：

button {
  background:url(data:image/gif;base64,R0lGODlhEgASAPYAAAAA/2NFB4tsE7KKCtCiDbWMCpFwDotwGdCgAe65FvjFKvjGLffDJNuqC5V1EaqJGPjHMPbKPvfOTLuRCo5yG+q3F/bEKG1SFdGjBvrcbeGuD2NFCY5wFfG+JPfNRpp1CLSOEfnJNPbOS/rPRsCSBmdJC8+mGvnLOv3ni/3nj/zkgPrUU9uqDWNCA9GoHfjSVfvie/rXW96tEmVHCreQFPnLP/fTXfrbdPzihf3qlP3mhsSYD5VzEPXEOffSWvrbcfzigP3rkqJ8DXFWFd2tFPrQSfnYYvvfdQAAAO7CNGVHDJh3DfLCK/nSUPraZ/zjfv3qkvzlhfvecqiCD2pNEL6TC/fGLvrSTfrbav3pjv3ojPzlgv3TT82kIWpOEZ55C+OyFfnMPvzdb/zda/3XWe/FOqiDEGpKAWZJDXNWEZt2B8KXDt6vHd+yIcifHKN+EXRTAmtQFmlMD2JCBWdIBmdIAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQF+gAAACwAAAAAEgASAAYH/4AAgoN1dHNzcnGDi4Rwb25tbGtqaWiMgmdmZWRjYmNkYWBfXoxnXVxiW1pZWltYV1ZVVIRTXFJRWVC6WU9OTUxLSoJwSWO4SEi6yEdGRURDAHRCV0+5yFBByEA/Pj08SnQ7ZDrWSDlQyDg3NjU0M3MyMTrK5lnIMFgvNS4tLSwrKqCcS4FiC5AnUoxcOWGiRQkSI6ToQKFjy5OLR7DEEBECxBwvH6zEQALjIgwYGUd66MBhA4A0Gkb4QJIhgxQsTkaKOIHhgiAlXyyIaIKsKBIPNSpQmDPIy4QOYUSIkCDCQwQIFR7MYCTHQQMGC6woYJAAwYGtl2ZcMFCAAIEBAg0utLi0aMOGfgHmMgoEACH5BAkFAAAALAYABQAGAAMABgcMgFCCg1BBhodBgoaBACH5BAkKAAAALAYABQAGAAMABgcOgEhIUFCCgkFBhoOFSIEAIfkEAQUAAAAsBgAFAAYAAwAGBwyAUIKDUEGGh0GChoEAOw==) no-repeat 5px center;
  padding:5px 5px 5px 27px;
}
<button type='submit'>Submit</button>

（或作为小提琴）

于 2012-04-26T08:51:54.077 回答
2

使用按钮元素并使用 css 对其进行样式设置。不要省略文本，您的表单应该可以在没有图像或 css 的情况下访问。

<button type='submit'>Informative submit text</button>

button {
    background-image:url('myimage.png');
}
于 2012-04-26T08:40:37.497 回答
1

如果有人需要更新的 html5 好的答案：

<button id='' name=''  value='' ><img src='img.jpg' /></button>
于 2016-11-17T23:50:06.840 回答
0 
<input type="image" src="myimage.png">

或者

<input type="submit" style="background:url(myimage.png)">
于 2012-04-26T08:53:08.523 回答