CSS 如何在提交按钮中设置背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2444894/
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 set background image in submit button?
提问by Jitendra Vyas
how to set background image in submit button?
如何在提交按钮中设置背景图像？
I have to use a image in place of regular submit button? which way would be best in xhtml/css?
我必须使用图像代替常规提交按钮吗？在 xhtml/css 中哪种方式最好？
Button should look same in all main browsers including IE6,IE7
按钮在包括 IE6、IE7 在内的所有主要浏览器中都应该看起来相同
回答by Phaze Phusion
The way I usually do it, is with the following css:
我通常这样做的方式是使用以下css：
div#submitForm input {
background: url("../images/buttonbg.png") no-repeat scroll 0 0 transparent;
color: #000000;
cursor: pointer;
font-weight: bold;
height: 20px;
padding-bottom: 2px;
width: 75px;
}
and the markup:
和标记：
<div id="submitForm">
<input type="submit" value="Submit" name="submit">
</div>
If things look different in the various browsers I implore you to use a reset style sheet which sets all margins, padding and maybe even borders to zero.
如果在各种浏览器中情况有所不同，我恳请您使用重置样式表，将所有边距、填充甚至边框设置为零。
回答by Donald Byrd
Typically one would use one (or more) image tags, maybe in combination with setting div background images in css to act as the submit button. The actual submit would be done in javascript on the click event.
通常会使用一个（或多个）图像标签，可能结合在 css 中设置 div 背景图像作为提交按钮。实际提交将在点击事件的 javascript 中完成。
A tutorialon the subject.
有关该主题的教程。
回答by muruga
.button {
border: none;
background: url('/forms/up.png') no-repeat top left;
padding: 2px 8px;
}
回答by Areej Qasrawi
i do it like this cover button and the middle image that
我喜欢这个封面按钮和中间的图片
<button><img src="foldername/imagename" width="30px" height= "30px"></button>
回答by user4546837
You can try the following code:
您可以尝试以下代码：
background-image:url('url of your image') 10px 10px no-repeat
