css实现背景模糊，但不影响背景上的内容

        当我们插入背景图片时，又不影响内容的表达，我们可以让背景图片模糊。

        下面介绍一下我所用到的方法。需要把背景图片和内容分别放在两个div里面方便我们管理，再对背景图片进行高斯模糊（filter属性）。

下面看一下代码设置：

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; */
}

效果如下：