关于遮罩的问题
来源：4-1 定位和边距的区别以及弹出层的简单实例
_麦当
2019-09-07 11:15:38
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹出层作业</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width: 100%;
height: 100%;
}
.content{
background: url("mooc.png") center top no-repeat;
width: 100%;
height: 4043px;
}
.login{
width:360px;
height:363px;
background: url("login.png") no-repeat;
position: fixed;
z-index: 5;
top:0;
left:0;
bottom:0;
right:0;
margin:auto auto;
}
.opacity_{
position: fixed;
z-index: 0;
width: 100%;
height: 100%;
background: url("opacity.png") center;
}
</style>
</head>
<body>
<div class="content"></div>
<div class="opacity_"></div>
<div class="login"></div>
</body>
</html>
请问为什么opacity那里要left和top都为0才能实现呢，我尝试用center放在background那里就完全没有遮罩
2回答
-
同学你好，left与top是定位的盒子的位置，而center是背景图片相对于盒子的显示位置。
这两个是没有关系的哦，如下有盒子位置，然后有center也是可以显示的。
定位元素一般都要都定位的位置哦，所以这里需要添加上定位的位置。
希望能帮助到你，祝学习愉快！
0 -
_麦当
提问者
2019-09-07
我在这里把遮罩的left和top去掉了
原本是这样的
.opacity_{ position: fixed; z-index: 0; width: 100%; height: 100%; background: url("opacity.png"); left: 0; top:0; }0
