如何为 input type="button" 添加背景图片？答案

【问题标题】：How to add background image for input type="button"?如何为 input type="button" 添加背景图片？
【发布时间】：2011-02-13 21:35:00
【问题描述】：

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

搜索.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>

搜索.css：

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

可能出了什么问题？

即使内联 css 似乎也不起作用。

【问题讨论】：

你应该改用<input type="image" />
当我尝试这样做时，它根本没有显示任何结果。无论如何，多亏了乔纳森，它现在可以工作了。

标签： html css button

【解决方案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>

【讨论】：

好笑。它对我不起作用。萤火虫控制台只显示：.button { cursor:pointer; }
您是否尝试将代码框中的内容复制并粘贴到 html 文件中以查看是否适合您？还可以尝试在路径周围使用引号或删除第一个 /。
k，现在可以使用 [type="button" 那个]！谢谢。我想知道外部CSS有什么问题。现在唯一的事情是它将图像显示为带有边框的按钮的背景。我怎样才能只显示图像，而不让它看起来像一个按钮？
该代码就像任何旧的 div 或 table 标签一样。 border: none;
如何设置图片大小以及如何设置可变图片？

【解决方案2】：

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

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

【讨论】：

其实我只是试了一下，你说的对！它不适用于空间，但这不是您的代码的唯一问题。
感谢您的指出。我在谷歌上寻找解决方案，其中一个答案是no-repeat，因此我尝试了。
url(/buttonsimages/redheart.jpg)// 这对我不起作用：以斜线开头的 URL url(buttonsimages/redheart.jpg)// 这对我有用：以文本开头的 URL跨度>

【解决方案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 element 以获取精美的提交按钮。

【讨论】：

【解决方案4】：

如果这是一个提交按钮，请使用<input type="image" src="..." ... />。

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

如果你想用 CSS 指定图片，you'll have to usetype="submit"。

【讨论】：

键入image 和submit 都充当提交，因此您可以通过form 标签属性onSubmit 捕获提交事件。 msdn.microsoft.com/en-us/library/ms536972(VS.85).aspx
如果您查看我测试过且正在运行的代码，input type="button" 和 input type="image" 可以使用 css 设置样式。他只是使用了错误的属性。
问题是，当我使用type="submit" 时，表单会重新加载但没有显示结果；但是当我使用type="button" 时，会显示结果。单击按钮时，数据是通过 ajax 生成的，并且表单没有任何名为“onsubmit”的处理程序。
如果您通过 AJAX 加载，那么您将调用移动到 onSubmit 事件，否则您通过 onClick 调用（我假设）并且表单提交为好吧。

【解决方案5】：

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

【讨论】：

欢迎来到 Stack Overflow。在为一个十年前的问题添加一个已接受答案的答案时，指出您的答案所针对的问题的哪些新方面非常重要。通过添加一些关于它们的工作原理和原因的解释，几乎总是可以改进仅代码的答案。