Heim > Web-Frontend > HTML-Tutorial > 紧急求助:如何实现背景图片自适应分辨率和IE窗口的调整_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 12:15:40
Original
1815 Leute haben es durchsucht

各位高手,请教一下,我这里有一个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 + "/";
%>

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


">
系统登录






<script></script>





        
            
                                 
                
             
                
                     
                                                                   
                
            
                                 
                                               
            
                
                    
                    
                    
                    
                 
                
                
                    
                    
                    
                 
            
                 
                    
                    
                    
                                 
                
                
                    
                    
                    
                   
                
                
                           
            

                    

                    

                    

                    

                    

                    

                    
                    

                    

                    

                    

                    

                    

                    

                    

                    

                    
                    

                    

                    

                    

                    

                    

                    

                    




<script> <br /> function processKey(event){ <br /> if(event.keyCode==13){ <br /> login(); <br /> } <br /> } <br /> <br /> function login(){ <br /> var saveFlag = true; <br /> <br /> var regArray = new Array(); <br /> var errorMsgArray = new Array(); <br /> regArray.push(emptyReg);//empty <br /> errorMsgArray.push("用户名不能为空 "); <br /> regArray.push(/^[\w*\W*]{1,16}$/);//length <br /> errorMsgArray.push("最大长度为16"); <br /> regArray.push(/^\w{1,16}$/);//character <br /> errorMsgArray.push("只能输入字符 0-9 a-z A-Z _"); <br /> var temp = checkText("userName",regArray,errorMsgArray); <br /> if(saveFlag==true) saveFlag = temp; <br /> <br /> <br /> regArray = new Array(); <br /> errorMsgArray = new Array(); <br /> regArray.push(emptyReg);//empty <br /> errorMsgArray.push("密码不能为空"); <br /> regArray.push(/^[\w*\W*]{1,16}$/);//length <br /> errorMsgArray.push("最大长度为16"); <br /> regArray.push(/^\w{1,16}$/);//character <br /> errorMsgArray.push("只能输入字符 0-9 a-z A-Z _"); <br /> temp = checkText("password",regArray,errorMsgArray); <br /> if(saveFlag==true) saveFlag = temp; <br /> <br /> if(saveFlag){ <br /> document.forms[0].submit(); <br /> } <br /> } <br /> </script>





对一个的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 。然后 单独在这个层里面建立一个层 

紧急求助:如何实现背景图片自适应分辨率和IE窗口的调整_html/css_WEB-ITnose
 对应的 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 + "/";
%>

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


">
系统登录






<script></script>





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


        
            
                                 
                
             
                
                     
                                                                   
                
            
                                 
                                               
            
                
                    
                    
                    
                    
                 
                
                
                    
                    
                    
                 
            
                 
                    
                    
                    
                                 
                
                
                    
                    
                    
                   
                
                
                           
            

                    

                    

                    

                    

                    

                    

                    
                    

                    

                    

                    

                    

                    

                    

                    

                    

                    
                    

                    

                    

                    

                    

                    

                    

                    











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

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage