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

【问题标题】：How to blur only background and not content in Ionic/CSS如何在 Ionic/CSS 中仅模糊背景而不是内容
【发布时间】：2015-09-12 03:31:09
【问题描述】：

我正在尝试为我的内容设置一个模糊的背景。

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

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

然后我得到了整个屏幕模糊的问题，而不仅仅是背景如下：

【问题讨论】：

要仅模糊背景图像，您的 HTML 应该看起来更像这样：<ion-view class="background-image"></ion-view> <div>header, content, footer</div>
您必须将 .background-image 放在内容下方，绝对定位且 z-index 较低。 stackoverflow.com/questions/20039765/…

标签： javascript html css ionic-framework

【解决方案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>

【讨论】：

知道如何去除角落的白色模糊（我知道应该是一个单独的问题），但也许你很快就知道了。
尝试光盘 .background-image { 背景：无重复中心中心固定；背景尺寸：封面；显示：块；左：-5px；顶部：-5px；底部：-5px；位置：固定；右：-5px； z-index：1； -webkit-filter：模糊（5px）； -moz过滤器：模糊（5px）； -o-过滤器：模糊（5px）； -ms-过滤器：模糊（5px）；过滤器：模糊（5px）； -webkit-background-size：封面； -moz-background-size：封面； -o-background-size：封面；边距：-5px； }

【解决方案2】：

把图片放到另一个div外面...像这样：

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

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

【讨论】：

【解决方案3】：

我想到了另一种方法，就是添加第二个background-image，在css3中，一个元素可以有多个background，第二个可以是模糊图像，即使质量很低，像这样

在sass

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

我猜第二个将覆盖第一或反向，你可以尝试一下

【讨论】：