如何为 input type="button" 添加背景图片？
[英]How to add background image for input type=“button”?
问题描述
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 似乎也不起作用。
5 个解决方案
解决方案1
61 已采纳 2010-04-29 16:26:02
You need to type it without the word image .您需要键入不带image一词。
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>
解决方案2
16 2010-04-29 16:53:13
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 url and ( :只是为了补充答案，我认为在这种情况下的具体原因，除了错位的no-repeat ，是url和(之间的空格：
background-image: url ('/image/btn.png') no-repeat; /* Won't work */
background-image: url('/image/btn.png'); /* Should work */
解决方案3
8 2010-04-29 16:35:38
background-image takes an url as a value. background-image将 url 作为值。 Use either使用任一
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 button HTML element for fancy submit buttons.此外，您可能想查看button HTML 元素以获取花哨的提交按钮。
解决方案4
4 2010-04-29 16:21:12
If this is a submit button, use <input type="image" src="..." ... /> .如果这是一个提交按钮，请使用<input type="image" src="..." ... /> 。
http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_IMAGE.htmlhttp://www.htmlcodetutorial.com/forms/_INPUT_TYPE_IMAGE.html
If you want to specify the image with CSS, you'll have to use type="submit" .如果要使用 CSS 指定图像， 则必须使用type="submit" 。
解决方案5
0 2020-07-01 00:02:46
.button{
background-image:url('/image/btn.png');
background-repeat:no-repeat;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.