对于未来的读者（以及现在的读者，他们并不特别关心跨浏览器支持）：有一种CSS机制可以 * 完全 * 做到这一点。
在滤镜效果规范中，滤镜也被定义为 * 函数表示法 *，接受图像+滤镜列表。语法如下所示：

.El {
  background-image: filter(url(myImage.jpg), blur(5px));
}

...其中filter函数的第二个参数接受过滤器列表（与filter属性相同）。
遗憾的是，到目前为止只有Safari实现了它--它在Safari 9中以-webkit-filter()的形式发布，但有一些严重的bug，所以他们甚至没有宣布支持它。此后，它在WebKit中得到了修复，并将在下一个版本的Safari（iOS 9.3/Desktop Safari 9.1）中发布。

将图形效果应用于元素backdrop-filter底部的区域

body {
  font-size: 1.6rem;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: url('path-image') center no-repeat;
  background-size: cover;
  backdrop-filter: blur(20px);
}

我得到了你的Codepen工作与以下CSS：

#home:before{
    content: ""; /* CHANGE HERE! */
    position: absolute; /* CHANGE HERE! */
    z-index: -1; /* CHANGE HERE! */

    display: block;
    background:url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat;
    background-size: cover;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    width: 100%;
    height: 1080px;
}
.home{    
  text-align:center;
  z-index: 0; /* CHANGE HERE! */
}

添加'：before'伪元素，指定在选定元素（#home）之前插入内容。
由于我们必须对元素进行一些重新排列，因此将位置设置为绝对值并更改z索引在这里很重要。
更多信息关于：before pseudo-element
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
有关z轴的详细信息：
http://www.w3schools.com/cssref/pr_pos_z-index.asp

要获得与共享的codepen类似的输出，必须使用相同的技术，并使用:before或:after之类的伪元素。
只需按如下所示更改您的CSS：

#home:before{
  content:'';
  display: block;
  background:url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat;
  background-size: cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 100%;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
  z-index:-1;
}

也许你可以使用opacity相关属性来代替webkit-filter选项：

#home{
    display: block;
    background:url('imageurl') no-repeat;
    background-size: cover;

    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;

    width: 100%;
    height: 1080px;
}

实际上你需要理解HTML div的块结构，你应用于父元素或父划分的任何东西也会应用于子元素，所以如果这是你的代码
<div class="parent"> Hi... <div class="child"> i am child </div> </div>
现在，如果你给父类应用css filter：blur属性，它也会影响子类，因为父类/div块包含了子类/div块，所以你给予父类的任何东西都会被子类采用。
但还是有一种方法可以做到：JSFiddle .
说明：有一个div以child作为span，另一个span作为单独的元素，这个div被赋予了blur，所以它的child也会受到影响，但是单独的span不会，因为它不是那个div的child。

超文本标记语言

<div class="bg">
   <span class="inner"> 
    <h1>Hey i am normal text above the Background, and i am "Blur" ! </h1>
   </span> 
</div>  

   <span class="outer"> 
    <h1>Hey i am normal text above the Background, and i am not "Blur" ! </h1>
   </span>

中央支助组

html, body {
    color:white;
    margin:0%;
    position:relative;
    background:black;
}
.bg {
    margin:0%;
    background-image:url(http://upload.wikimedia.org/wikipedia/commons/1/12/Sling-Sat_removing_space_debris.png);
    background-repeat:no-repeat;
    background-size:cover;
    height:100%;
    width:100%;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    z-index:-1;
}
.inner {
    z-index:0;
    display:block;
    width:100%;
    height:100%;
    position:fixed;
    top:0%;
    overflow:auto;
    text-align:center;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}
.outer {
    z-index:0;
    display:block;
    width:100%;
    height:100%;
    position:fixed;
    top:0%;
    overflow:auto;
    text-align:center;
    padding-top:50px;
}