如何将图像放入输入按钮？

Question

我需要将图像放入输入按钮，但它不适用于我的代码。 这是代码，它说“无法加载图像”，请帮助我：

.button-search {
        background-image: url('images/lupa.png');
        no-repeat scroll center #F1F1F1;
        cursor: pointer;
        display: inline-block;
        float: right;
        height: 27px;
        overflow:hidden;
        text-indent: -9999em;
        width: 36px;
        border: none;
        margin-right: 48px;
}

Answer 1

你有两个问题：

首先，在背景图像选择器之后，但在其参数之前有一个分号。 no-repeat scroll center $F1F1F1 是 background 选择器的参数（应该被视为在同一行，而不是换行符）。这就引出了下一点：错误的选择器。

其次，正确的选择器（对于您正在执行的操作）是 background 而不是 background-image。 background 选择器是一个“速记”选择器，允许您设置 (1) 背景图像、(2) 背景位置、(3) 背景颜色、(4) 背景重复等。但是background-image 选择器只允许你设置背景图片。

jsFiddle Demo

以下是更正后的代码：

.button-search {
        background: url('http://placekitten.com/g/50/50')no-repeat scroll center #F1F1F1;
        cursor: pointer;
        display: inline-block;
        float: right;
        height: 27px;
        overflow:hidden;
        text-indent: -9999em;
        width: 36px;
        border: none;
        margin-right: 48px;
}

还要注意text-indent 选择器（设置为 -9999em）会将按钮文本移动到左侧，并且（在 -9999em）一直离开屏幕 - 可能会进入邻居的房子，也许是他们的厨房.可能你已经知道了……？

Answer 2

如果您收到该错误，则说明图片 URL 错误。