<!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>博客列表 >绝对定位实现遮罩层-2019年1月16日
绝对定位实现遮罩层-2019年1月16日
- 超超的博客原创转载
- 2019年01月16日 14:44:42753浏览
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
