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

时间：2022-04-26 12:41:08
登录页面的body设置了背景图片，用户名和密码框需要固定到背景对应的位置上，如何实现呢？

11 个解决方案

#1

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

#2

窗口缩放时，会错位的

#3

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

#4

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

#5



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

#6

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

#7

引用 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 以下不支持，有替代方案么？

#8

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


background-image:url('xx.png');

background-size:cover;

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='xx.png') 

#9

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

#10

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

#11

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

#1

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

#2

窗口缩放时，会错位的

#3

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

#4

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

#5



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

#6

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

#7

引用 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 以下不支持，有替代方案么？

#8

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


background-image:url('xx.png');

background-size:cover;

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='xx.png') 

#9

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

#10

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

#11

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

相关文章