如何在Ionic / CSS中仅模糊背景而不是内容

Question

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

到目前为止，我试过这个：

.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>

但后来我遇到的问题是整个屏幕都模糊不清，而不仅仅是背景如下：

Answer 1

将内容放在模糊的div旁边。

.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>

Answer 2

还有另外一种方法来添加第二个background-image， 在css3中，你可以为一个元素提供多个background，第二个可以是模糊图像，即使质量很低，也可以像这样

sass

中的

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

我猜第二个会先覆盖或反转，你可以尝试一下

Answer 3

将图像放在另一个div之外......就像这样：

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

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