搜索图标无法在CSS中工作

Question

我正在使用以下css代码：

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

搜索框：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

它看起来像这样：

但是，我希望搜索框看起来像这样：

请注意我的css文件夹中有png文件。此示例是https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table的复制。

Answer 1

根据您的文件结构，我不相信您正在引用您想要的图片。

而不是：

background-image: url('/css/searchicon.png');

执行：

background-image: url('css/searchicon.png');

OR

background-image: url('https://www.w3schools.com/css/searchicon.png');

Answer 2

它似乎对我来说正常工作，我只是仔细检查一下你的路径是否正确的图像，并确保在html中正确引用css文件

Answer 3

你写道：＆＃34;我的css文件夹中有png文件。＆＃34;

CSS文件夹在哪里：与HTML文件处于同一级别？

然后你应该写background-image: url('css/searchicon.png');

Answer 4

也许您的图片网址不正确，请检查并回答我是否有问题。

Answer 5

网址路径仅与CSS样式表位置相关。因此，根据样式表的位置，它是img的相对路径。

  

部分URL相对于样式表的来源进行解释，而不是相对于文档：

     

BODY { background: url(yellow) }

     

参考：https://www.w3.org/TR/REC-CSS1/#url

正如其他人所说，你的网址路径不正确，例如：

#myInput {
  background-image: url(https://www.w3schools.com/css/searchicon.png);
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">