CSS绝对定位实现窗口遮罩功能:
这是HTML代码部分
实例
<!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="static/css/zhezhao.css"> </head> <body> <div class="shade"></div> <!-- <div class="login"><img src="static/images/login.jpg" alt=""></div> --> <div class="login"> <form action=""> <h3>用户登录窗口</h3> <label for="usernaem">用户名：</label> <input type="text" name="username" id="username" placeholder="请输入用户名"> <br> <label for="pwd">密码：</label> <input type="password" name="pwd" id="pwd" placeholder="6-10个字母或数字"> <br> <button>登录</button> </form> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
这里是CSS绝对定位－遮罩：css部分
实例
body {
margin: 0;
background-image: url(../images/php.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.shade {
/* 遮罩绝对定位，并自动伸展到整个窗口 */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
.login {
background-color: white;
/* 登录窗口不随窗口大小变化，说明它不是文档流中，是绝对定位 */
position: absolute;
/* 使登录窗口页面在正中间位置开始显示，注意是显示的起点在正中间 */
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -190px;
}
.login form {
width: 300px;
height: 380px;
}
.login form h3 {
color: blue;
text-align: center;
}
.login form label {
color: green;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
