Question

我一直在尝试添加模糊效果，如iOS7控制中心所示，其中包含以下代码，这些代码来自this question的接受答案。

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

然而，当我编写上述代码片段并运行应用程序时，它会在整个屏幕上显示模糊效果，因此其中的内容无法读取。但是，下面的示例只会正确影响背景，因为我覆盖了博客内容＆＃39;背景色

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

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

Answer 3

我过去使用过这个jQuery插件，它运行得很好：http://blurjs.com/听起来它正是你想要的。这是我发现模糊背景背后内容的唯一方法。

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

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

3 个答案: