图像未显示在悬停的导航栏中

debugcn 发表于 Dev

愤怒

我遇到的问题是我想在搜索栏默认文字“搜索”旁边出现的图片。即使我已为要显示的图像的URL编码，该图像也不会出现。我已按照本教程中的说明安装了自定义搜索栏-http: //www.bloominrouge.com/2015/01/a-simple-and-sleek-search-bar-widget.html。

下面，我包括了搜索栏的整个编码：

<style>

  #search {    
    background: url (https://lh4.googleusercontent.com/-pVUC_2t4N3Q/VHUyuRgha5I/AAAAAAAAC6g/Wm6jR3X_21U/h120/search3.png) 98% 50% no-repeat;
    text-align: left; 
    margin-right:-4%;
    width: 100%;  
    float:right;
    max-width: 210px;
    border: 0;
  }  
  #searchform {
    height: 20px;
}
 #search #s {  
    background: #f8f8f8;  
    color: #333333; 
    font-size: 10px!important; 
    font-family: karla, arial;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: normal;
    letter-spacing: 0.09em;
    border: 0;  
    width: 60%;
    padding: 0;  
    margin: 0;  
    outline: none;  
    position: relative;
    top: 9px;
    padding-left: 6px;
  }  

</style>

<div id='search' title='Type and hit enter'> 
  <form action='/search' id='searchform' method='get'> 
    <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}' onfocus='if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}' type='text' value='Search'/> 
  </form> 
</div>  
<br/><br/>

我曾尝试过多次调整边距和填充编号，以查看大量的边距和填充元素是否不干扰图像但无济于事。我也尝试插入不同的图像，但即使这样也没有用。

大卫

干得好：

#search {    
    background: url(https://lh4.googleusercontent.com/-pVUC_2t4N3Q/VHUyuRgha5I/AAAAAAAAC6g/Wm6jR3X_21U/h120/search3.png);
    background-repeat:no-repeat;
    background-position:98% 5px;
    text-align: left; 
    width: 100%;  
    float:right;
    max-width: 210px;
    border: 0;
  }  

 #search #s {  
    background: #f8f8f8;  
    color: #333333; 
    font-size: 10px!important; 
    font-family: karla, arial;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: normal;
    letter-spacing: 0.09em;
    border: 0;  
    width: 60%;
    padding: 0;  
    margin: 0;  
    outline: none;  
    position: relative;
    top: 0px;
    padding-top:9px;
    padding-left: 6px;
  }

url和（之间的空间需要删除，并且top:9px需要更改，因为它隐藏了所有溢出的内容。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。