css3背景图片虚化效果

需求：一个div设置了background: url，现在需要使图片背景模糊，div内的文字清晰显示。

内容和图片分别置于一个div，通过css设置背景div模糊度，设置内容div绝对位置。

html:

    <div>
        <div class="bg bg-blur"></div>
        <div class="content content-front">平静的湖景</div>
    </div>

设置背景虚化效果，css设置如下所示：

        .bg{
            background: url('./img/b1.jpg');
            height: 600px;
            line-height: 600px;
            text-align: center;
        }
        .bg-blur{
            width: 100%;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            -webkit-filter: blur(15px);
            -moz-filter: blur(15px);
            -o-filter: blur(15px);
            -ms-filter: blur(15px);
            filter: blur(15px);
        }

预览：

接着，设置文本的css样式：

        .content{
            font-size: 40px;
            color: #fff;
        }
        .content-front{
            height: 600px;
            line-height: 600px;
            text-align: center;
            position: absolute;
            left: 10px;
            right: 10px;
        }

同时需要给同级兄弟元素.bg-blur设置浮动float:left;让其脱离标准文档流。

        .bg-blur{
            width: 100%;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            -webkit-filter: blur(15px);
            -moz-filter: blur(15px);
            -o-filter: blur(15px);
            -ms-filter: blur(15px);
            filter: blur(15px);
            float: left;
        }

总体预览效果如下所示：