如何使用 css 和 html 在图像上输入 type="text"答案

【问题标题】：How do I put input type="text" on the Image using css and html如何使用 css 和 html 在图像上输入 type="text"
【发布时间】：2014-03-18 03:02:52
【问题描述】：

我不想知道如何使用图像作为输入文本。我想知道如何将文本输入放在图像上

<div id = "background">
   <img class="stretch" alt="" src="C:\Users\joseph\Documents\GitHub\Spring2014\CMP342\MainProject\WebContent\WEB-INF\img\login.png">
      <div class = "text">
          <input type="text" >
          <input type="text" >
      </div>
</div>

#background{
  margin-left:30%;
  width:400px;
  height:400px;
}
.stretch{
  width:100%;
  height:100%;
}

.text{

}

我现在想做的是模仿谷歌的“登录”页面

【问题讨论】：

我注意到您没有关闭输入标签
我有图片，“输入文字”应该在图片上
如果你想使用链接图像作为背景，文本输入在顶部，你需要将链接图像作为背景 div 的背景图像。您不需要“”标签。
我问你如何定位
据我所知，谷歌在登录表单后面没有图像。您能否发布一个指向您要模仿的内容的链接。

标签： html css textinput

【解决方案1】：

你有两个选择

为#backkground 设置背景图像。使用边距、填充或其他背景 css 进行定位。此选项不需要任何 img 标签。
在#background 上使用 position: relative，在 .text 上使用 position: absolute。在#text 上使用左、上、右、下 css 来实现您想要的任何类型的定位。

我建议使用第一个选项。但是如果你因为某些原因觉得需要保留 img 标签，那么第二个选项对你来说已经足够了。

【讨论】：

【解决方案2】：

请务必关闭您的文本输入标签。也试试这个。

CSS：

#background {
    margin-left: 30%;
    width: 400px;
    height: 400px;
    background-image: url(C:\Users\joseph\Documents\GitHub\Spring2014\CMP342\MainProject\WebContent\WEB-INF\img\login.png);
    background-size: contain;
}

HTML：

<div id = "background">
 <div class = "text">
    <input type="text" />
    <input type="text" />
 </div>
</div>

使用 CSS 将文本输入放置在 div 内您想要的位置。

【讨论】：