绝对定位之遮罩

实例

/*背景加上自己需要的背景图片或者网站主页*/
body{
	margin:0px;
	background-image:url(image/1.jpg);
	background-size:cover;
}
/*遮罩用绝对定位，背景加模糊opacity*/
.shadow{
     position:absolute;
     left:0px;
     top:0px;
     height:100%;
     width:100%;
     background-color: black;
     opacity:0.7;
}
/*登录页面绝对定位，定位窗口左上角，移动到页面的中心，按登录页的一半校对*/
.login{
	background-color: white;
	position:absolute;
	border:1px solid red;
    left:50%;
    top:50%;
    margin-left:-93px;
    margin-top:-60px;
    height:110px;
}
/*登录页面里的图片设定其原有大小px*/
.login img{
	width:186px;
	height:130px;

}

体会:绝对定位不在文档流，重新定位的基础上，用div做遮罩，用属性做模糊状态，里面的图片也是绝对定位，

定位时，用left，top属性进行定位，margin-left，margin-top进行校对