html 图片随窗口调整,紧急求助：如何实现背景图片自适应分辨率和IE窗口的调整_html/css_WEB-ITnose...

各位高手，请教一下，我这里有一个jsp的登录页面。页面上除了输入框和按钮外，就是背景图片。其中的输入框的位置都用的是相对位置。但IE或分辨率调整后，仍会发生输入框和背景图错位的情况。请教一下大家，如何才能让背景图片也随IE和分辨率的变化而变化呢？？

请各位高手不吝赐教！！！！页面代码如下：

login.jsp：

if(request.getSession(true).getAttribute(UserSessionInfo.USER_SESSION)!=null){

response.sendRedirect("examination/index");

}

response.setHeader("Pragma", "No-cache");

response.setHeader("Cache-Control", "no-cache");

response.setDateHeader("Expires", 0);

String path = request.getContextPath();

String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

系统登录

对一个的style.css如下：

.loginBgGround{

background-repeat:no-repeat;

background-position:center;

background-image:url(../images/bg.jpg);

background-attachment:fixed;

width:100%;

height:100%;

}

.loginHeader{

/* background-image:url(../images/bg.jpg); */

background-color:blue

}

.labelStyle{

font-weight:bold;

font-size:15px;

color:#333333;

}

.inputTextStyle{

/* background-image:url(../images/TextBox.jpg); */

}

.warningFont{

font-size:12px;

color:#ff0000;

font-weight:bold;

}

.area {

background-image:url(../images/AREA.gif);

height:19px;

width:129px;

border:0px;

font-family:Tahoma;

font-size:12px;

color:#333333;

padding-left:3px;

}

.button{

display: block;

cursor:hand;

width:101px;

height:92px;

/*background:url(../images/LoginButton.jpg) no-repeat;*/

}

.button1,.button2{

float:left;

width:196px;

height:40px;

position:relative;

/*background:url(../images/button.jpg) no-repeat;*/

}

.button1{

display: block;

padding: 5px 10px 5px 11px;

cursor:hand;

font-size :22px;

background-position:50% 20%;

}

.button2{

display: block;

padding: 5px 10px 5px 11px;

cursor:hand;

font-size :22px;

background-position:50% 81%;

}

回复讨论(解决方案)

背景图要使用百分比，必须使用CSS3，ie9之前的浏览器不支持的。

你不要采用相对定位的方法，直接设置固定的宽度和高度实现

有一个 不是办法的办法，如果不考虑根据分辨率自适应之后的拉伸问题的话可以这么写先给 大外层 一个 position:relative 。然后 单独在这个层里面建立一个层

对应的 css 这么写 .bgimg{width:100%；height100%；position:absolute;z-index:xxx；} .bgimg img{width:100%;height:100%;}

其实 原理 就是 把这个 图片放在页面的 最底层 骗过视觉效果让人觉得是个背景。然后拉伸这个层 ，拉伸一个层 我想 比拉伸一个 背景要 简单多了。

楼上在吗？我照你的方法做了之后，现在页面和输入框的位置确实实现了相对静止。但是出现了个新的问题，就是页面和输入出现在整个IE的右侧，本来设置的width＝100％的，但实际上确实背景出现在IE50％的地方，然后往右一直到了IE150％的地方。

代码如下，麻烦您，也麻烦各位高手能帮我看看，指点迷津，谢谢！

login.jsp代码如下：

if(request.getSession(true).getAttribute(UserSessionInfo.USER_SESSION)!=null){

response.sendRedirect("examination/index");

}

response.setHeader("Pragma", "No-cache");

response.setHeader("Cache-Control", "no-cache");

response.setDateHeader("Expires", 0);

String path = request.getContextPath();

String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

系统登录

css代码如下：

.loginBgGround{

/*background-repeat:no-repeat;*/

background-position:center;

/*background-image:url(../images/bg.jpg); */

background-attachment:fixed;

width:100%;

height:100%;

position: absolute;

margin:0;

}

.divImg{

width:100%;

height:100%;

position:absolute;

z-index:-1;

margin: 0;

}

.divTB{

width:100%;

height:100%;

position:absolute;

z-index:1;

margin: 0;

}

我自己搞定了！！呵呵，出了一身汗啊！虽然最后自己搞定了，但还是要谢谢楼上了，你的那种思路很巧妙！

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理