图像中的HTML表单

Question

如何在图像(jpg)中放置和html表单(文本框和按钮).请提供css,html代码.

注意:图像应位于背景中,并且应为完整尺寸.

Answer 1

你也可以使用这个技巧:

<form style="position: relative;">
    <img src="mypicture.jpg" border="0" />
    <div style="position: absolute; left: 0px; top: 0px;"> 
       Input here... <input type="text" /><br />
       Input here... <input type="text" /><br />
       Input here... <input type="text" /><br />
       Input here... <input type="text" /><br />
       Input here... <input type="text" /><br />
       <button type="submit">Send</button>
    </div>
</div>

现场测试案例可在此处获取:http://jsfiddle.net/9UcZg/

编辑:为了使表单内容居中,硬编码宽度如下:

<div style="position: absolute; left: 0px; top: 0px; text-align: center; width: 450px;">

(更新的测试用例:http://jsfiddle.net/9UcZg/2/)

或者使用JavaScript来"动态"计算宽度:

window.onload = function WindowLoad() {
    var oImage = document.getElementById("MyFormBackground");
    var oDiv = document.getElementById("MyFormContents");
    var totalWidth = oImage.offsetWidth;
    var contentsWidth = oDiv.offsetWidth;
    oDiv.style.left = parseInt((totalWidth - contentsWidth) / 2) + "px";
}

要做到这一点你必须改变HTML,添加id到图像和容器div,这是更新的测试用例:http://jsfiddle.net/9UcZg/3/