Question

我无法弄清楚为什么搜索图标的图像在下载后使用图片时不会出现在搜索框内，但在直接使用链接时会显示。任何建议？图片如下：http://www.paulund.co.uk/playground/demo/pretty_search_forms/images/search.png

<div  class="bar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div id="logo">  
            <a href="main.php">XYZ</a>
        </div>
        <div  class="col-xs-5 right-inner-addon has-feedback">
               <form class="form-inline" role="form">
                 <div class="form-group has-feedback">
                 <label class="control-label" for="inputSuccess4"></label>
                 <input type="text" class="form-control" id="inputSuccess4" placeholder="Search">     
                 </div>
               </form>             
        </div>
    </div>   
</div>

.right-inner-addon {
    padding-top: 8px;
    padding-left:30px;

}
.right-inner-addon input {
    height: 30px;
    padding: 0px 10px;
    background-image: url('images/search.png');
    background-position: 370px -10px;
background-repeat: no-repeat;
}

.form-control{
    min-width: 400px; 
    max-width: 400px; 
    min-height: 29px;
    top: 7px;
    position: fixed;

}

Answer 1

将background-position属性值更改为365px 5px。

Updated Example - （不知道你想要它定位在哪里 - 但现在它至少可见）

.right-inner-addon input {
    height: 30px;
    padding: 0px 10px;
    background-image: url('http://www.paulund.co.uk/playground/demo/pretty_search_forms/images/search.png');
    background-position: 365px 5px;
    background-repeat: no-repeat;
}

Answer 2

您实际上并不需要在positioining中指定px。请检查此fiddle。

CSS：

.right-inner-addon input {
    height: 30px;
    padding: 0px 10px;
    background: url('http://www.paulund.co.uk/playground/demo/pretty_search_forms/images/search.png') no-repeat right center;   
}

Answer 3

好的你应该把它放在搜索图标的行中。

background-image: url('../images/search.png');

请注意目录如果您的照片在本地计算机上，则可以执行此操作不要忘了这个（在您的目录之前../）

Answer 4

如果你的图像在线，就像你说这是你的新代码：

背景：网址（＆＃39; http://www.paulund.co.uk/playground/demo/pretty_search_forms/images/search.png＆＃39;）不重复右中心;

但是如果你在本地电脑上有一个图像文件，那么你应该输入这段代码：

background-image: url('../images/search.png');

在搜索框中看不到搜索图标的图像

4 个答案: