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

回复讨论(解决方案)

집

웹 프론트엔드

HTML 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:15 PM

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

回复讨论(解决方案)

背景图要使用百分比，必须使用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>

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

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.