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选择器是＆＃34;简写＆＃34;选择器，并允许您设置（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处）从屏幕一直移动 - 并且可能移动到邻居＆＃39;房子，他们的厨房也许。可能你已经知道了这个......？

Answer 2

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

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

2 个答案: