三种模糊效果
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="bg1">
<div class="drag1">
like window
</div>
</div>
<div class="bg2">
<div class="drag2">
<div>like window</div>
</div>
</div>
<div class="bg3">
<div class="drag3">
like window
</div>
</div>
</body>
<script>
</script>
</html>
css
@charset "UTF-8";
*{
margin: 0;
padding:0;
font-size:1.2vw;
transition: all 0.5s;
}
:focus{
outline: none;
}
html,body{
height:100%;
}
/*模糊背景*/
.bg1{
width:100%;
height:100%;
position: relative;
background: url("../image/banner/banner.jpg") no-repeat fixed;
padding:1px;
box-sizing:border-box;
z-index:1;
}
.bg1:after{
content: "";
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: inherit;
filter: blur(2px);
z-index: 2;
}
.drag1{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
width:200px;
height:200px;
text-align: center;
/*background: inherit;*/
z-index:11;
}
/*背景局部模糊*/
.bg2{
width:100%;
height:100%;
background: url("../image/banner/banner.jpg") no-repeat fixed;
padding:1px;
box-sizing:border-box;
z-index:1;
}
.drag2{
margin:100px auto;
width:200px;
height:200px;
background: inherit;
position: relative;
}
.drag2 >div{
width:100%;
height: 100%;
text-align: center;
line-height:200px;
position: absolute;
left:0;
top:0;
z-index: 11;
}
.drag2:after{
content: "";
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: inherit;
filter: blur(15px);
z-index: 2;
}
/*背景局部清晰*/
.bg3{
width:100%;
height:100%;
position: relative;
background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536405868251&di=ae57a63d3f8269033f81085235eb727c&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201708%2F03%2F104453y7qi0iqv44rvl6nn.jpg") no-repeat fixed;
padding:1px;
box-sizing:border-box;
}
.bg3:after{
content: "";
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: inherit;
filter: blur(3px);
z-index: 1;
}
.drag3{
position: absolute;
left:40%;
top:30%;
/*transform: translate(-50%,-50%);*/
width:200px;
height:200px;
text-align: center;
background: inherit;
z-index:11;
box-shadow: 0 0 10px 6px rgba(0,0,0,.5);
}
