Question

我有一个图像可以将自身固定为页面宽度的100％。无论用户在浏览器中调整大小，它都保持相同的大小（在屏幕上）。

我现在需要在图像顶部添加一个Enter Your Name表单字段。但是，无论用户调整浏览器窗口的大小，我都希望文本和表单字段大小和位置保持不变。这很重要，因为我需要将表单字段表完美地叠加在图像上，否则它看起来会很糟糕。

这是我目前的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

看到这个小提琴：

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;
}

对以下评论的回复：

尝试这个小提琴来显示整个背景图像：

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;
}

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

将图片宽度设置为100％。这会给出您提出的输出：

看到这个小提琴：http://jsfiddle.net/nV7tP/5/

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

在固定尺寸图像上叠加固定尺寸表格字段

1 个答案: