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

Question

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

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

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

body {
    background-color: red;
}

.blog {
    background-color: white;
}

也就是说，如果我尝试对以下代码采用相同的方法，它应该会覆盖背景:

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

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

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

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

[更新]

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

Answer 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;
}