【问题标题】:How to place an Html form over an Image [closed]如何在图像上放置 Html 表单 [关闭]
【发布时间】:2016-06-27 02:18:37
【问题描述】:

我想在手机图片上放置一个表单。我尝试了我能想到的一切(我是 html 和 Css 的新手)。

这是我工作的链接PicText.

这是 Image

顺便说一句,我正在尝试将表格放在中间电话(Iphone)上。

【问题讨论】:

  • 表格可以放zindex
  • background-image?
  • 是的,有点像@4castle 的背景图片
  • 在包含的 div 上设置背景图像非常容易,然后调整表单 CSS 以适应中间。我实际上已经全部解决了...然后单击保存以获取您的代码...但我不想注册 SoloLearn...所以...这一切都随着该要求而消失了。太糟糕了,代码不在 CodePen 或 jsFiddle 中,您不需要 在他们的网站上注册。
  • 谢谢@Scott 我会尝试在 CodePen 设置代码

标签: html css image forms


【解决方案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我可以选择是否登录..代码不会丢失。)

【讨论】:

  • 我还建议将overflow-y: scroll 添加到.formhold
  • 好点@WoodrowBarlow 理想情况下,表单字段将位于具有溢出属性的单独 div 中。将提交按钮留在 div 之外,因此它保持在原位。不过,我不想对 HTML 进行许多改进。
猜你喜欢
  • 1970-01-01
  • 2013-07-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-08-11
相关资源
最近更新 更多