实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遮罩案例</title>
<!-- <link rel="stylesheet" href="css/demo04.css"> -->
<style>
/* 把浏览器自带的边距清空 */
*{margin: 0;
padding: 0}
/* 给body添加样式 */
body{
background-image: url(../images/bg.jpg);
/* 将背景平铺 */
background-size: cover;
/* 将背景重复关掉 */
background-repeat:no-repeat;
}
/* 给遮罩添加浮动，并伸展到全屏 */
.shade{
position:absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black ;
/* 设置背景透明 */
opacity: 0.5;
}
.login{
/* 设定登录框的宽高 */
width: 380px;
height:460px;
/* 先让login脱离文档流，采用绝对定位 */
position:absolute;
/* 是登录框的以页面正中间作为显示起点 */
left:50%;
top:50%;
/* 搬动登录框，使其居中 */
margin-left:-190px;
margin-top:-230px;
}
</style>
</head>
<body>
<div class="shade"></div>
<div class="login"><img src="images/login.jpg" alt="加载失败"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1.第一步先去除浏览器自带的边距。
2.一定要将布局对象脱离文档流
3.居中的方法：先让图片以背景正中间作为显示起点，再搬动
