Question

我需要创建一个html页面。在这个html页面中，我需要一个带有<input type="text "/>的图像。此输入位于图像的中间;此输入类型文本在右侧输入内也有“搜索”图标。

我尝试以这种方式构建代码：

<html>
   <img src="./home/image.jpeg">
       <input type="text" name="food" placeholder="insert the food">  
       </input> <!-- this input has the icon search on the right-->
    </img>
<html>

显然它不起作用。是否有一种很好的方法可以使它发挥作用？

Answer 1

将您的输入放在div中，并使图像成为该div的背景图像。

Answer 2

您需要更具体地回答您的问题。你可以上传链接吗？但您还要在输入类型文本中添加背景图像。像这样：

输入{background-image：url（“search_icon.png”）;位置：绝对的; }

Answer 3

这应该为你做

HTML：

<div class="bg">
   <input type="text" name="food" placeholder="insert the food">  
</div>

CSS：

.bg{
   background-image: url("http://lorempixel.com/200/200/");
   background-repeat:no-repeat;
   height:200px;
   width:200px;
   line-height:200px;
   text-align:center;
}

将输入类型文本放在图像的中心

3 个答案: