Question

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

下面我已经包含了搜索栏的整个编码：

     #search {
       text-align: left;
       margin-right: -5.5%;
       width: 100%;
       float: right;
       max-width: 210px;
       border: 0;
     }
     #searchform {
       height: 20px;
     }
     #search #s {
       background: #f8f8f8 url(http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/829C0943-C2A2-4052-BFF5-49E6606F44B6_zps3r9lpyvb.gif)98% 50% no-repeat;
       color: #333333;
       font-size: 10.5px!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: 11px;
       padding-left: 6px;
     }

<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/>

Answer 1

图像显示。

只是图像很大且大部分是透明的，因此实际出现在输入内部的整个区域不包含任何彩色像素。

可能您正在寻找background-size: contain（或者以合理尺寸开始的图像！）。

图像不显示尽管它在Html中

1 个答案: