固定尺寸图像上的覆盖固定大小表单字段
固定尺寸图像上的覆盖固定大小表单字段
提问于 2014-01-05 02:26:51
我有一个图像，修复自己100%的页面宽度。无论用户在浏览器中做什么调整大小，它都保持相同的大小(在屏幕上)。
现在，我需要在图像的顶部添加一个Enter您的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顶部的特定位置覆盖该表？当用户在浏览器窗口中调整大小或缩小大小时，我将如何保持相同的大小？
谢谢你的帮助！
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-01-05 02:45:58
看这把小提琴：
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;
}注意:最好是使用第一次发布的fiddle.Its的CSS，这种类型的CSS主要在目前流行的网站中使用。
将图像宽度设置为100% .This将提供所要求的输出：
看这把小提琴：http://jsfiddle.net/nV7tP/5/
或者，如果您想要一个最小宽度的容器，请参阅此http://jsfiddle.net/nV7tP/6/。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20929297
复制相关文章
相似问题
腾讯云开发者
