实现效果预览：Daipu Architects 中间区域。

html：

<div class="wrapper">
    <div class="overlay">
        <div class="overlay-con">
        </div>
    </div>
</div>

父级div，一般背景图会覆盖浏览器可视区域：

.wrapper{
    ...
    width: 100%;
    height: 100%;
    background: url(image.png);
    background-size: cover;
    ...
}

模糊背景层，固定宽度，高度为js计算得出，:after设置模糊效果，如果在child上设置，包含文字也会模糊掉:

.overlay{
    ...
    width: 750px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -375px;
    background: inherit;
    ...

    &:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: inherit;
        z-index: 0;
        -webkit-filter: blur(3px);
    }
}

文字层div：

.overlay-con {
    background: rgba(255,255,255,.6);
    position: relative;
    z-index: 1;
}

总结：没想到background:inherit会带来这么大的惊喜～