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/

Answer 2

你对'一张图片'的意思是什么？你想将图像用作表格背景吗？那样的话：

<html>
<head>
<style>
.formWithBackground {
background-image:url("url to image");
background-repeate:no-repeat;
background-position:...
}
</style>
...
<body>...
<form class="formWithBackground">
<input type="text".../><button>send</button>
</form>
....

应该有所帮助问候格哈德

Answer 3

将代码放入div中，并为div提供背景图像。

<style type="text/css">
#picture {
    background-image:url(myimage.jpg)
}
</style>

<div id="picture">

<form>
<input type="text">
<input type="submit">
</form>

</div>

Answer 4

显而易见的答案是将jpeg图像作为包含表单字段的元素的背景。

CSS：

.myformbox {
  background-image:url(myimage.jpg);
  height:100px;  /*or whatever the height of the image is*/
  width:100px;   /*ditto*/
}

HTML：

<div class='myformbox'>
  <form ....>
    ....input fields here....
  </form>
</div>

......或类似的东西。

我注意到你的编辑说“图像应该是全尺寸的”。这仍然是模棱两可的语言：你的意思是“盒子需要是图像的全尺寸”，还是“图像需要缩放到盒子的大小”？

对于第一个，请参见上文，我在CSS中添加了高度和宽度参数。

然而，对于第二个问题，您遇到了一个问题，即CSS目前不支持背景图像缩放（还有！）。对此的解决方案有点复杂，但如果这是您要问的问题，here is a page that might help。

图像中的HTML表单

4 个答案: