收藏
批改状态：未批改
老师批语：
利用绝对定位做出登录时遮罩的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>前端布局-绝对定位实现窗口遮罩功能</title>
<!-- <link rel="stylesheet" href="staic/css/style02.css"> -->
<style>
body {
margin: 0;
background-repeat: no-repeat;
background-size: cover;
}
.shaodow {
position: absolute;
/*设置绝对定位才能浮起来*/
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
.login {
background-color: azure;
position: absolute;
left: 50%;
top: 50%;
margin-left: -190px;
margin-top: -230px;
}
.login img {
width: 380px;
height: 460px;
}
</style>
</head>
<body>
<!-- 模拟登陆界面 -->
<div class="shaodow"></div>
<div class="login"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3271652437,845468270&fm=26&gp=0.jpg" alt="登陆界面"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
细节总结：opacity代表透明度属性 登录框只有设置成绝对定位才能始终在屏幕中间 居中的思路是先定位到屏幕水平和垂直的50%，然后再左移和上移登录模块宽高的50%
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
