我一直试图通过CSS改变输入按钮的背景图像,但它不起作用.
search.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:
.button {
background-image: url ('/image/btn.png') no-repeat;
cursor:pointer;
}
什么可能是错的？
甚至内联css似乎没有用.
Jon*_*ics 54
你需要在没有单词的情况下输入它image.
background: url('/image/btn.png') no-repeat;
测试两种方式,这一个工作.
例:
<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>
Pek*_*ica 15
只是为了增加答案,我认为在这种情况下,除了错位之外,具体原因no-repeat是:url和之间的空间(:
background-image: url ('/image/btn.png') no-repeat; /* Won't work */
background-image: url('/image/btn.png'); /* Should work */
background-image将网址作为值。使用任一
background-image: url ('/image/btn.png');
要么
background: url ('/image/btn.png') no-repeat;
这是的简写
background-image: url ('/image/btn.png');
background-repeat: no-repeat;
另外，您可能希望查看buttonHTML元素中的精美提交按钮。