如何在图像上放置 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我可以选择是否登录..代码不会丢失。）}