html 背景高斯模糊,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; */

}

效果如下：