当我们插入背景图片时，又不影响内容的表达，我们可以让背景图片模糊。
下面介绍一下我所用到的方法。需要把背景图片和内容分别放在两个div里面方便我们管理，再对背景图片进行高斯模糊（filter属性）。
下面看一下代码设置：
html代码：
<!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>
<link rel="stylesheet" href="2.css">
</head>
<body>
<div>
<div class="bg bg-blur"></div>
<div class="content font-content">今天是植树节，你植树了吗？</div>
</div>
</body>
</html>
css代码：
.bg{
background-image:url(2.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; */
}
效果如下：
