如何在图像上放置Html表单

Question

我想将表单放置在手机图像上。我尝试了所有我能想到的（我是HTML和Css的新手）。

这里是我的工作PicText.

链接这是 Image

顺便说一句，这是中间的手机（IPHONE的），我想放置在窗体上。

Answer 1

您可以将类添加到周围的形式格，然后添加一个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可以选择登录或不..代码也不会丢失。）}