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

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

40 голосов
/ 29 апреля 2010

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

Ответы [ 4 ]

52 голосов
/ 29 апреля 2010

Вам нужно набрать его без слова 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>
15 голосов
/ 29 апреля 2010

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

background-image: url ('/image/btn.png') no-repeat; /* Won't work */
background-image: url('/image/btn.png'); /* Should work */
4 голосов
/ 29 апреля 2010

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

3 голосов
/ 29 апреля 2010

Если это кнопка отправки, используйте <input type="image" src="..." ... />.

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

Если вы хотите указать изображение с помощью CSS, вам придется использовать type="submit".

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...