搜索图标的图像在搜索框中不可见答案

【问题标题】：image of search icon not visible inside search box搜索图标的图像在搜索框中不可见
【发布时间】：2014-05-10 02:50:06
【问题描述】：

我不明白为什么下载后使用图片时搜索图标的图片没有出现在搜索框中，而直接使用链接时出现。有什么建议吗？图片是这样的：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;

}

【问题讨论】：

标签： html css twitter-bootstrap search icons

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

【讨论】：

实际上我不想使用背景图片 url 中提供的链接.. 而是在下载后使用同一张图片并提供图片的相对位置..但是当我这样做时图片没有出现
@user3452721 那一定是路径。您的目录中的图像在哪里？值得注意的是，部分 URL 的解释是相对于样式表的来源，而不是相对于文档
@user3452721 你可以试试url('../images/search.png') .. 或url('/images/search.png')。
问题出在您建议的背景位置，而不是相对位置。非常感谢您抽出宝贵的时间

【解决方案2】：

您实际上不需要在定位中指定 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;   
}

【讨论】：

【解决方案3】：

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

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

请注意目录如果您的照片在本地计算机中，您会这样做不要忘记这个好（../ 在你的目录之前）

【讨论】：

【解决方案4】：

如果你的图片像你所说的那样在线，这是你的新代码：

背景：url('http://www.paulund.co.uk/playground/demo/pretty_search_forms/images/search.png') 不重复右居中；

但如果您在本地电脑中有图像文件，您应该输入以下代码：

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

【讨论】：