收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.绝对定位实现窗口遮罩功能</title>
<style>
body{
margin: 0;
background: blue;
}
/* 设置遮罩层 */
.shadow{
/* 遮罩绝对定位,脱离文档流,自动伸展到整个窗口 */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 2000px;
background: black;
opacity: 0.7; /*透明度*/
}
/* 设置登录窗口 */
.login{
width: 380px;
height: 460px;
background: white;
position: fixed;
left: 50%;
top: 50%;
margin-top: -190px;
margin-left: -230px;
}
</style>
</head>
<body>
<h1 style="color:yellow;">模拟XXX网登录</h1>
<div class="shadow"></div>
<div class="login">
<h3 style="text-align:center;">扫二维码登录</h3>
<div style="
width:200px;
height:200px;
background:green;
margin: 80px auto;
"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
