添加模糊效果demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>模糊背景</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
html,body{
height:100%;
}
.wrap{
min-height:100%;
}
.mian{
}
.content{
height:100px;
position:relative;
overflow:hidden;
}
.content .text{
color:#fff;
padding:10px;
}
.background{
position:absolute;
top:0;
left:0;
100%;
height:100%;
z-index:-1;
background:url("./images/bg.jpg") center center no-repeat;
background-size:100% 100;
filter:blur(10px)
}
</style>
</head>
<body>
<div class="wrap">
<div class=main>
<div class="content">
<div class="text">我是内容</div>
<div class="background"></div>
</div>
</div>
</div>
</body>
</html>