Как добавить фоновое изображение для input type="button"?

Я пытаюсь изменить фоновое изображение кнопки ввода через 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 не работал.

Ответы

Ответ 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>

Ответ 2

Чтобы добавить к ответам, я думаю, что конкретная причина в этом случае, помимо неулокального no-repeat, - это пробел между url и (:

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

Ответ 3

background-image принимает URL-адрес в качестве значения. Используйте

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-элемент для модных кнопок отправки.