css 如何为input type=“button”添加背景图片？

aydmsdu9 于 2023-05-08 发布在其他

关注(0)|答案(6)|浏览(261)

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

css

来源：https://stackoverflow.com/questions/2738920/how-to-add-background-image-for-input-type-button

6条答案

按热度按时间

kkbh8khc1#

您需要键入它，而不是单词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>

赞(0）回复(0）举报 2023-05-08

oug3syen2#

为了补充答案，我认为在这种情况下，除了错位的no-repeat之外，具体原因是url和(之间的空间：

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

赞(0）回复(0）举报 2023-05-08

k5hmc34c3#

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 element以获得花哨的提交按钮。

赞(0）回复(0）举报 2023-05-08

eblbsuwk4#

如果这是一个提交按钮，请使用<input type="image" src="..." ... />。
http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_IMAGE.html
如果你想用CSS指定图像，you'll have to usetype="submit"。

赞(0）回复(0）举报 2023-05-08

0tdrvxhp5#

.button-class {
  background: url(images/tom1.png) no-repeat; /* local source or link */
  cursor: pointer; /* if you want different cursor */
  border: none;
}

或

#button-id {
  background: url(images/img.png) no-repeat;
  cursor: pointer;
  border: none;
}

赞(0）回复(0）举报 2023-05-08

kcwpcxri6#

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

赞(0）回复(0）举报 2023-05-08

我来回答

css 如何为input type=“button”添加背景图片？

6条答案

相关问题

热门标签

最新问答