如何在图像上放置Html表单

Question

我想在手机图片上放一张表格。我尝试了我能想到的一切（我是html和Css的新手）。

以下是我的工作PicText .

的链接

这是 Image

顺便说一句，它是在我试图放置表格的中间电话（Iphone）上。

Answer 1

您可以在表单周围的div中添加一个类，然后向该div添加background-image ....然后调整表单的大小和位置以适合图像：

唯一的HTML调整是在下面的div中添加了类：

  <div class="formhold">
    <form method="post" action="action_page.php">

基本CSS

.formhold {
  width: 600px; /* width of the image */
  height: 520px; /* height of the image */
  background: url(http://i.imgur.com/YUuTWwr.png?1) no-repeat center top;
}

form {
  display: block;
  width: 180px; /* width to use in the middle phone screen */
  margin: 0 auto; /* centers form over image */
  padding-top: 120px; /* moves form down from top of image */
}

jsFiddle Demo

请注意，我调整了文本和密码输入的CSS填充和边距，因此表单将垂直放置。最有可能需要更多细化，但这至少应该让你开始。

_{（个人偏好是jsFiddle，其他人只需要注册。使用jsFiddle我可以选择是否登录..代码不会丢失。）}