html - 如何使用 css 和 html 将输入类型 ="text"放在图像上

Question

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

登录.html

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

登录.css

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

.text{

}

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

Answer 1

你有两个选择

1. 为#backkground 设置背景图片。使用边距、填充或其他背景 css 进行定位。此选项不需要任何 img 标签。

2. 在 #background 上使用 position: relative，在 .text 上使用 position: absolute。在 #text 上使用 left、top、right、bottom css 进行任何类型的定位。

我建议选择第一个选项。但是，如果出于某些原因您觉得需要保留 img 标签，那么第二种选择就足够了。