如何为输入类型=“按钮"添加背景图像? [英] How to add background image for input type="button"?

查看:20
本文介绍了如何为输入类型=“按钮"添加背景图像?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在尝试通过 css 更改输入按钮的背景图像,但它不起作用.

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

search.html:

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:

search.css:

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

可能有什么问题?

甚至内联 css 似乎也不起作用.

even inline-ing the css didn't seem to work.

推荐答案

你需要输入不带image这个词.

You need to type it without the word image.

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

两种方式都测试过,这种方式有效.

Tested both ways and this one works.

示例:

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

这篇关于如何为输入类型=“按钮"添加背景图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆