收藏
批改状态：未批改
老师批语：
绝对定位实现窗口遮罩，可方便制作后台登陆窗口等。
<!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"> <link rel="stylesheet" href="static/css/style04.css"> <title>绝对定位之窗口遮罩</title> </head> <body> <div class="zhezhao"></div> <div class="login"><img src="static/images/img.jpg" alt=""></div> </body> </html>
点击 "运行实例" 按钮查看在线实例
body {
margin: 0;
background-image: url(../images/img.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.zhezhao {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
.login {
background-color: antiquewhite;
position: absolute;
left: 50%;
top: 50%;
}
.login img {
width: 300px;
height: 500px;
}点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
