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>

如何将表格覆盖在 FixedImage.jpg 顶部的特定位置？当用户在浏览器窗口中调整大小或放大/缩小时，我如何保持它的大小不变？

感谢您对此的帮助!!!

Answer 1

看这个 fiddle :

http://jsfiddle.net/nV7tP/1/

CSS:

.fixedimage{
    width:100% !important;
    height:auto;
    display:block;
    background:url(http://www.hdwallpaperspick.com/wp-content/uploads/2013/06/beautiful-autumn-scenery-723-2.jpg);
    background-position:50% 50%;
    background-size:cover;
}
.fixedimage form{
    width:100%;
    color:white;
    font-size:40px;
    text-align:center;
}
.fixedimage form input{
    width:250px;
    height:30px;
}

---

回复以下评论:

试试这个 fiddle 来显示整个背景图像:

http://jsfiddle.net/nV7tP/2/

.fixedimage{
    position:absolute;
    width:100% !important;
    height:auto;
    display:block;
    font-size:40px;
}
.fixedimage img{
    position:absolute;
}
.fixedimage form{
    position:absolute;
    width:100%;
    color:white;
    text-align:center;
}
.fixedimage form input{
    width:250px;
    height:30px;
}

注意:如果你使用第一个发布的fiddle的CSS会更好。它是目前流行网站中主要使用的CSS类型。

---

将图像宽度设置为 100%。这将给出您要求的输出:

请参阅此 fiddle :http://jsfiddle.net/nV7tP/5/

或者如果您想要一个最小宽度的容器，请参阅此 http://jsfiddle.net/nV7tP/6/ .