如何将图像放在搜索栏的背景中？

Question

这是我的第一篇文章。

我是一名自学成才的开发人员，我真的很想学习如何将图像放在搜索栏的背景中。

我可以想象 HTML 不适合，但我不太了解 CSS。

正如这门关于 CSS 的 MND 课程* 所建议的，我们可以将预定义的文本嵌入到我所说的搜索栏框的“对话框”中。

我很确定可以在此搜索栏中嵌入背景图像（.PNG 或 .SVG 格式，但如果可能的话，我更愿意使用矢量格式）。

但是至于“变量”、“属性”或“属性”，我不知道该使用哪个或如何在我的代码中制定它以使其发挥作用。

*https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/search

我现在没有代码acec，但根据记忆，我的CSS中有类似的东西：

.image-searchbar{
to get the URL of the image I stored it on a server and retrieved the link that belongs to it.

收到代码后我会立即更新这篇文章。

Answer 1

简单：

input {
  background-image: url(filename.svg);
}

像这样：

label {
  display: block;
  font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}


/*the code you need*/

input {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a0/Svg_example1.svg);
  background-position: 0;
}

<label for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q" />

<button>Search</button>