各位高手,请教一下,我这里有一个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处理