如何将表单域覆盖在具有固定宽度的图像上？

Question

我有一个固定宽度的图像。它的宽度调整为屏幕宽度的 100%。它的高度会根据屏幕宽度进行相应调整。

我需要在这张图片上覆盖一个表单域。我仍然希望显示完整的图像......它的所有宽度和高度都像我现在拥有的那样。

我该怎么做？另外，我如何将表单字段定位在图像上的某个位置？这很困难，因为图像会根据屏幕宽度进行调整。但是只有一部分图像适合表单字段以使其看起来不错。我希望这是有道理的。

这是我当前的代码：

CSS：

.fixedimage img{
    width:100% !important;
    height:auto;
    display:block;
}

HTML：

<TABLE WIDTH="100%" CELLPADDING="0" CELLSPACING="0" BORDER="0">
<TR>
<TD WIDTH="100%">
<div class="fixedimage">
    <center><img src="fixedimage.jpg" /></center>
</div>
</TD>
</TR>
</TABLE>

非常感谢！！

Answer 1

看到这个fiddle。您将看到一个与图像重叠的输入框。

重要的部分是：

#formElement 
{
    position:absolute;
    top:50%;
    left:50%;
}

注意position:absolute 将图像和% 位置重叠，以便输入随着页面大小的变化而移动。