添加模糊效果demo

添加模糊效果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;
			width: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>