头疼，登录页面的body设置了背景图片，用户名和密码框需要固定到背景对应的位置上，如何实现呢？

[ahking]

登录页面的body设置了背景图片，用户名和密码框需要固定到背景对应的位置上，如何实现呢？

[fjfjfj]

<style type="text/css">
html,body{margin:0;padding:0;width:100%;height:100%;}
body{background:url("http://b.zol-img.com.cn/desk/bizhi/image/5/960x600/1409882801492.jpg");background-size:cover;background-repeat:no-repeat;background-position:center;}
.login-box{position:fixed;width:200px;height:200px;background:rgba(0,0,0,0.5);left:50%;top:50%;margin-left:-100px;margin-top:-100px;}
</style>
<div class="login-box"></div>

自己去调: background-position:center;可以改为 background-position:20% 40%; left:50%;top:50%; 可以改为：left:20%;top:40%;

[萧十三少]

用div做好层，设置宽度大小

[ahking]

窗口缩放时，会错位的

[杨小事er]

设置position:啊 相对定位和绝对定位

[zpjshiwo77]

那时因为你定位的问题没有处理好，可以去查查相对定位，绝对定位，好好学一学。 这里你没贴代码出来，我只能猜测你的用户名、密码的表单是绝对定位，而且是相对于浏览器窗口的绝对定位。所以导致了窗口缩放时会错位。

[ahking]

呵呵，我一开始用和背景图片相同大小的div，然后在该div上定位，没有问题；但感觉这种方式不是很好，然后在body中设置背景，就不知道怎么定位到body的正确位置了

[ahking]

引用 5 楼 fjfjfj 的回复:

<style type="text/css">
html,body{margin:0;padding:0;width:100%;height:100%;}
body{background:url("http://b.zol-img.com.cn/desk/bizhi/image/5/960x600/1409882801492.jpg");background-size:cover;background-repeat:no-repeat;background-position:center;}
.login-box{position:fixed;width:200px;height:200px;background:rgba(0,0,0,0.5);left:50%;top:50%;margin-left:-100px;margin-top:-100px;}
</style>
<div class="login-box"></div>

自己去调: background-position:center;可以改为 background-position:20% 40%; left:50%;top:50%; 可以改为：left:20%;top:40%;

background-size:cover ie9 以下不支持，有替代方案么？

[strongyann]

只能说 ：你在body 上设的背景图。那么在 浏览器窗口变化的时候 你应该考虑下 背景的同步拉伸，否则你怎么定位都定位不了的 。至于背景的拉伸 你参考

background-image:url('xx.png');
background-size:cover;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='xx.png') 

[书香卷气]

用相对定位position:relative;(针对上一级标签)绝对定位position:absolute(针对的是body)；

[苏生米沿]

相对定位呗

[林雉]

同不会 背景图和内容一缩放相对位置就会错位，怎么让div的背景图可以充满整个屏幕还能够和内容缩放同步 相对位置不变化呢