发表新帖
发表新帖

How to add background image for input type=“button”?

前端 未结
关注
5 794
醉梦人生
醉梦人生 2020-11-30 07:06

i\'ve been trying to change the background image of the input button through css, but it doesn\'t work.

search.html:
相关标签:
5条回答
  • 囚心锁ツ
    2020-11-30 07:49

    You need to type it without the word 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>
    0 讨论(0)
  • 心在旅途
    2020-11-30 07:53

    If this is a submit button, use <input type="image" src="..." ... />.

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

    If you want to specify the image with CSS, you'll have to use type="submit".

    0 讨论(0)
  • 孤街浪徒
    2020-11-30 08:00

    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 (:

    background-image: url ('/image/btn.png') no-repeat; /* Won't work */
background-image: url('/image/btn.png'); /* Should work */
    0 讨论(0)
  • 走了就别回头了
    2020-11-30 08:00

    background-image takes an url as a value. 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.

    0 讨论(0)
  • 耶瑟儿～
    2020-11-30 08:02 
    .button{
    background-image:url('/image/btn.png');
    background-repeat:no-repeat;
}
    0 讨论(0)
 看不清?
提交回复
热议问题