<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>高斯模糊背景</title>
<style>
.bg{
background-image:url(../images/1.jpg);
width:100%;
height:750px;
line-height:750px;
}
.bg-blur{
float:left;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
-webkit-filter: blur(9px);
-moz-filter: blur(9px);
-o-filter: blur(9px);
-ms-filter: blur(9px);
filter:blur(9px); }
.content{
font-size:50px;
color:#555;
font-weight:bold;
}
.font-content{
position:absolute;
width:700px;
height:700px;
margin:20px;
text-align:center;
line-height:700px;
left:50%;
top:50%;
transform: translate3d(-50%,-50%,0);
/* border:2px solid red; */
}
</style>
</head>
<body>
<div>
<div class="bg bg-blur"></div>
<div class="content font-content">今天是植树节，你植树了吗？</div>
</div>
</body>
</html>
效果如下：
