使表单域适合背景图像

Question

我在解决这个方面遇到了一些问题：

我有一个带有登录框的全屏图像。我已经看到很多方法可以将图像添加到表单字段中，但我必须以相反的方式工作。我必须将表单字段放在背景图像上的正确位置。

我该怎么做？

Answer 1

这是你需要的吗？

＆＃13;

＆＃13;

#myForm {
  position: absolute;
  top: 100px; /* wherever you want it */
  left: 400px; /* wherever you want it */
}

＆＃13;

<div class="container">
  <img src="http://placehold.it/800x300">
  <div id="myForm">
    <form>
      <label for="pw">Password</label>
      <input name="pw" type="text" />
    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;