是否可以仅在背景上使用类似 iOS7 的模糊效果？答案

【问题标题】：Is it possible to use iOS7-like blur effect only on the background?是否可以仅在背景上使用类似 iOS7 的模糊效果？
【发布时间】：2014-04-11 18:06:32
【问题描述】：

我一直在尝试添加像在 iOS7 控制中心看到的模糊效果，使用以下代码，来自this question 的接受答案。

body {
    -webkit-filter: blur(20px);
    opacity: 0.4;
}

但是，当我编写上面的 sn-p 并运行应用程序时，它会在整个屏幕上显示模糊效果，因此那里的内容不可读。但是，下面的示例仅正确影响背景，因为我覆盖了博客内容的背景颜色

body {
    background-color: red;
}

.blog {
    background-color: white;
}

话虽如此，如果我尝试使用以下代码采用相同的方法，则应该覆盖背景：

.blog {
    -webkit-filter: blur(0px);
    opacity: 1.0;
}

它仍然模糊了整个窗口。那么为什么会出现这种不和谐呢？

我想只在背景上影响模糊 - 换句话说，我不希望它对页眉、页脚、博客文章、旁边部分的内容（如博客标签类别）产生影响，广告等等……

我在 Chrome 浏览器、Stylus 和 Bootstrap 3 中使用 HTML 5 和 CSS 3。

[更新]

我不想使用额外的背景图片 - 只想让背景变得模糊。

【问题讨论】：

你也可以看看Chris Coyier实现这个效果的技术：css-tricks.com/blurry-background-effect

标签： html css

【解决方案1】：

有几种方法可以做到这一点，但它们都涉及相同的基本步骤。

由于模糊效果作用于整个元素，而不仅仅是背景，因此您需要一个专门的元素来包含背景和应用到它的效果。然后，您只需将其余内容覆盖在上面即可。

这是我的尝试：http://jsfiddle.net/83aBP/

.background {
  height: 100%;
  width: 100%;
  background: url(http://i.imgur.com/Zz5bPNl.png);
  background-size: cover;
  position: fixed;
  -webkit-filter: blur(20px);
  opacity: 0.8;
}

.content {
  position: relative;
  color: white;
  z-index: 10;
}

【讨论】：

+1 用于过滤器，但您可以使用伪元素来改进它以避免非语义标记jsfiddle.net/coma/83aBP/2
这需要额外的图像文件吗？只添加模糊效果是否可行？看起来删除 background: url(); 不起作用...
@Gardecolo，请看我的回答，因为我相信它可以完美地满足您的需求。
@Gardecolo，我使用的背景图片只是一个例子。您需要某种背景图像来创建模糊效果，否则它将只是纯色（如果背景已定义颜色）。
@coma，是的，这是一个更干净的解决方案，但是一些浏览器（

【解决方案2】：

将背景保存在与正文不同的容器中，如下所示：

<div id="background"></div>
<div id="body"></div>

那么就可以通过对背景应用如下滤镜来实现 iOS 7 的视差效果：

#background {
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);
  opacity: 0.4;
}

#body {
  color: #fff;
  position: relative;
  z-index: 100; 
  margin:0;
  padding:0;
}

【讨论】：

【解决方案3】：

我过去曾使用过这个 jQuery 插件，它运行良好：http://blurjs.com/ 听起来它正是您正在寻找的。这是我发现的唯一一种模糊背景背后内容的方法。

如果这不是您想要的，请告诉我，我会找到合适的解决方案。

【讨论】：