緊急ヘルプ: 背景画像の適応解像度を実現する方法と IE window_html/css_WEB-ITnose の調整

専門家の皆様、教えてください。ここに JSP ログイン ページがあります。ページ上の入力ボックスとボタンに加えて、背景画像があります。入力ボックスの位置はすべて相対位置です。ただし、IE または解像度調整後も、入力ボックスと背景画像の位置がずれることがあります。皆さんにお聞きしたいのですが、IEや解像度の変更で背景画像を変更するにはどうすればよいでしょうか？ ?
専門家の皆様からアドバイスをお願いします！ ！ ！ ！ページのコードは次のとおりです:
login.jsp:
<%@ page contentType="text/html;charset=gb2312" language="java" import="java.util.*,com.iproject.examsys.web .to. *" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
if(request.getSession(true).getAttribute(UserSessionInfo.USER_SESSION) )!= null){
response.sendRedirect("検査/インデックス");
}
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-キャッシュ") ;
response.setDateHeader("Expires", 0);
文字列パス = request.getContextPath();
文字列 BasePath = request.getScheme() + "://" + request.getServerName() + ": " + request .getServerPort() + path + "/";
%>



< ;head>

"keywords " content="四川省給排水協会">

%>
> ="1.875%" >

                                                                   



                
                               

 








                    
 










                 









   



           

関数 processKey(event){
if(event.keyCode==13){
login();
}
}

function login(){
var saveFlag = true;

var regArray = new Array();
var errorMsgArray = new Array();
regArray.push(emptyReg);//empty
errorMsgArray.push("用户名不能为空 ");
regArray.push(/^[\w*\W*]{1,16}$/);//length
errorMsgArray.push("最大长度为16");
regArray.push(/^\w{1,16}$/);//character
errorMsgArray.push("只能输入字符  0-9 a-z A-Z _");
var temp = checkText("userName",regArray,errorMsgArray);
if(saveFlag==true) saveFlag = temp;
   

regArray = new Array();
errorMsgArray = new Array();
regArray.push(emptyReg);//empty
errorMsgArray.push("密码不能为空");
regArray.push(/^[\w*\W*]{1,16}$/);//length
errorMsgArray.push("最大长度为16");
regArray.push(/^\w{1,16}$/);//character
errorMsgArray.push("只能输入字符  0-9 a-z A-Z _");
temp = checkText("password",regArray,errorMsgArray);
if(saveFlag==true) saveFlag = temp;

if(saveFlag){
document.forms[0].submit();
}
}






对一个的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 全体の右側に表示されます。当初設定されていた幅 = 100% ですが、実際には背景が IE50% に表示され、その後 IE150 まで右側に表示されます。 %。
コードは次のとおりです。どうか、どうか、すべての専門家が私を見てアドバイスをくれるので、よろしくお願いします。
login.jsp コードは次のとおりです。

<%@ page contentType="text/html;charset=gb2312" language="java" import="java.util.*,com.iproject.examsys.web. to.* " %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<%
if(request.getSession(true).getAttribute(UserSessionInfo.USER_SESSION) !=null ){
response.sendRedirect("examination/index");
}
response.setHeader("Pragma", "キャッシュなし");
response.setHeader("キャッシュコントロール", "キャッシュなし") ");
response.setDateHeader("Expires", 0);
文字列パス = request.getContextPath();
文字列 BasePath = request.getScheme() + "://" + request.getServerName() + ":" + リクエスト。getServerPort() + パス + "/";
%>
head> ;
キーワード" content="四川省給排水協会">

< div align "left" "divTB">
gt;


                                                                   



                
                               

 








                    
                 
            
                 
                    
                    
                    
                    
                    
                    
                    
                    
                                 
                
                
                    
                    
                    
                    
                    
                    
                    
                   
                
                
                    
                           
            

& lt;/html & gt; ;*/ C 背景位置 :center; /*background-image:url; /bg.jpg); */
幅:100%;
マージン :0 }
幅:100%;
高さ:100%;
位置:-1;
.divTB{
幅:100%;
位置:絶対; -index:1;
margin: 0;

自分でやりました！ ！ははは、汗が出てきました！最終的には自分でやり遂げましたが、それでも上の階に感​​謝しなければなりません。あなたのアイデアはとても賢いですね!