Javascript 如何在Ionic/CSS中只模糊背景而不模糊内容

我试图为我的内容设置一个模糊的背景

到目前为止，我试过：

.background-image {
  background-image: url('../img/background/image.jpg');
  width: 100vw;
  height: 100vh;

  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

然后

<ion-view class="background-image">
   // header, content, footer etc
<ion-view>

//页眉、内容、页脚等

但我发现整个屏幕模糊，而不仅仅是背景，如下所示：

---

将内容放在模糊分区的外侧

.background-image {
  background-image: url('../img/background/image.jpg');
  width: 100vw;
  height: 100vh;

  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

<div class="background-image"></div>

<div>Content</div>

。背景图像{
背景图像：url（'../img/background/image.jpg'）；
宽度：100vw；
高度：100vh；
-webkit过滤器：模糊（10px）；
-moz滤波器：模糊（10px）；
-o-滤波器：模糊（10px）；
-ms过滤器：模糊（10px）；
过滤器：模糊（10px）；
}
内容

将图像放在另一个分区之外。。。像这样：

<div class="background-image"></div>

<div class="content">
<p>Here goes your content</p>
</div>

这是你的内容

还有一种方法让我想到，那就是添加第二张

背景图像，
在css3中，一个元素可以有多个
背景
，第二个元素可以是模糊图像，即使质量很低，如下所示

在
sass中

#element
 background:
  image: url(/*first url*/), url(/*second url*/)
  size: auto auto /*first one*/, 100% 100% /* second one*/

我猜second将覆盖first或Reverse，您可以尝试只模糊背景图像，您的HTML应该更像这样：
页眉、内容、页脚
您必须将.background image放在内容下，绝对位置的z索引较低。你知道如何去除角落里的白色模糊吗（我知道这是一个单独的问题），但也许你很快就会知道。试试dis css.background image{背景：无重复中心固定；背景大小：封面；显示：块；左侧：-5px；顶部：-5px；底部：-5px；位置：固定；右侧：-5px；z索引：1；-webkit过滤器：模糊（5px）；-moz过滤器：模糊（5px）；-o过滤器：模糊（5px）；-ms过滤器：模糊（5px）；过滤器：模糊（5px）；-webkit背景尺寸：封面；-moz背景尺寸：封面；-o-background-size:封面；页边距：-5px；}