Question

我一直在尝试通过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似乎也不起作用。

Answer 1

您需要输入不带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>

Answer 2

只是为了添加答案，我认为除了错误的no-repeat之外，本案例中的具体原因是url和(之间的空格：

background-image: url ('/image/btn.png') no-repeat; /* Won't work */
background-image: url('/image/btn.png'); /* Should work */

Answer 3

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;

另外，您可能需要查看button HTML element的花式提交按钮。

Answer 4

如果这是提交按钮，请使用<input type="image" src="..." ... />。

http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_IMAGE.html

如果您想使用CSS指定图片，you'll have to use type="submit"。

Answer 5

.button{
    background-image:url('/image/btn.png');
    background-repeat:no-repeat;
}

如何为输入类型=“按钮”添加背景图像？

5 个答案: