收藏
批改状态：合格
老师批语：写的很不错 以后的作业回复是通过微信公众号的哦
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位实现遮罩层</title>
<style>
body{
background-image:url(https://img.php.cn/upload/article/000/000/003/5b49b0e610f26951.jpg);
background-repeat:no-repeat;
background-size:cover;
}
.shade{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:black;
opacity:0.5;//设置背景透明度
}
.login{
width:200px;
height:300px;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-150px;
background-color:#f00;
}
</style>
</head>
<body>
<div class="shade"></div>
<div class="login"></div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
