<!doctypehtml>
<html>
<head>
<metacharset=”UTF-8″/>
<title>毛玻璃</title>
<styletype=”text/css”>
*{
margin:0px;
padding:0px;
}
html,
body{
width:100%;
height:100%;
}
.main{
width:100%;
height:100%;
position:relative;
background:url(img1.jpg)centertop;
background-size:cover;
}
.content{
width:800px;
height:400px;
position:absolute;
top:50%;
left:50%;
overflow:hidden;
margin-top:-200px;
margin-left:-400px;
border-radius:10px;
box-shadow:010px20pxrgba(0,0,0,0.5);
z-index:100;
padding:50px;
box-sizing:border-box;
/*不会把盒子撑开*/
}
.content::before{
content:””;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
z-index:-1;
/*-1可以当背景*/
filter:blur(20px);
margin:-30px;/*消除边缘透明*/
background:url(img1.jpg)centertop;
background-size:cover;
/*平铺*/
background-attachment:fixed;
/*位置固定*/
}
</style>
</head>
<body>
<div>
<div>
</div>
</div>
</body>
</html>