Html 如何为 input type="button" 添加背景图片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2738920/
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 add background image for input type="button"?
提问by input
i've been trying to change the background image of the input button through css, but it doesn't work.
我一直在尝试通过 css 更改输入按钮的背景图像，但它不起作用。
search.html:
搜索.html：
<body>
<form name="myform" class="wrapper">
<input type="text" name="q" onkeyup="showUser()" />
<input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
<p>
<div id="txtHint"></div>
</p>
</form>
</body>
search.css:
搜索.css：
.button {
background-image: url ('/image/btn.png') no-repeat;
cursor:pointer;
}
what could be wrong?
有什么问题？
even inline-ing the css didn't seem to work.
即使内联 css 似乎也不起作用。
回答by Jonathan Czitkovics
You need to type it without the word image.
您需要键入不带image.
background: url('/image/btn.png') no-repeat;
background: url('/image/btn.png') no-repeat;
Tested both ways and this one works.
两种方式都经过测试，这种方式有效。
Example:
例子：
<html>
<head>
<style type="text/css">
.button{
background: url(/image/btn.png) no-repeat;
cursor:pointer;
border: none;
}
</style>
</head>
<body>
<input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
<input type="image" name="button" value="Search" onclick="showUser()" class="button"/>
<input type="submit" name="button" value="Search" onclick="showUser()" class="button"/>
</body>
</html>
回答by Pekka
Just to add to the answers, I think the specific reason in this case, in addition to the misplaced no-repeat, is the space between urland (:
我想补充的答案，我想在这种情况下，具体的原因，除了放错了地方no-repeat，是之间的空间url和(：
background-image: url ('/image/btn.png') no-repeat; /* Won't work */
background-image: url('/image/btn.png'); /* Should work */
回答by Tgr
background-imagetakes an url as a value. Use either
background-image将 url 作为值。使用任一
background-image: url ('/image/btn.png');
or
或者
background: url ('/image/btn.png') no-repeat;
which is a shorthand for
这是一个简写
background-image: url ('/image/btn.png');
background-repeat: no-repeat;
Also, you might want to look at the buttonHTML elementfor fancy submit buttons.
此外，您可能想查看buttonHTML 元素以查找花哨的提交按钮。
回答by Greg K
If this is a submit button, use <input type="image" src="..." ... />.
如果这是一个提交按钮，请使用<input type="image" src="..." ... />.
http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_IMAGE.html
http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_IMAGE.html
If you want to specify the image with CSS, you'll have to usetype="submit".
如果要使用 CSS 指定图像，则必须使用type="submit".
