html - 如何在固定宽度的图像上覆盖表单域？

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 重叠图像和 % 位置，以便输入随着页面大小的变化而移动。