模糊div标签后面的所有对象（图像，div，文本..）

Question

需要你的帮助。

我创建了一个静态的半透明横幅，它位于网站的顶部。当用户滚动网站时，整个容器对象都在横幅下面。我希望所有的物体（图像，文字......等）都能在横幅下方得到blury效果。

由于

Answer 1

使用CSS和jQuery是不可能的。您可以使用IE的filters做一些事情，但这只是IE（当然），并且会使您的CSS失效。

目前，没有办法做到这一点，虽然CSS 4中可能会出现某种情况。

Chrome每夜构建support some filters，但是没有alpha模糊过滤器（至少还是如此）。

Answer 2

你能够做到这一点的唯一方法就是通过一些CSS和javascript来获得乐趣。 CSS不直接支持模糊，但是you can emulate it with text-shadow。 Images can also be blurred有一点jquery / css / javascript魔法，但会有问题，因为你不能部分模糊图像（当只有部分图像在横幅下时会发生什么？）。它可能是通过分层你的图像并跟踪他们在屏幕上的位置来完成的，但所有这些似乎都需要做很多工作才能获得非常小的回报。

因此，假设您决定全部拍摄，您将不得不使用javascript来确定页面的哪些部分已经在横幅下传递，并将样式应用于这些部分。此任务的难度将随着页面布局的复杂性而扩展。在最佳情况下，您的横幅和内容容器都是html正文宽度的100％。在这一点上，每次页面滚动时找到遍历dom的某种扫描仪来找到应该应用模糊的元素将是相当简单的。但是，最好情况的情况很少出现在手边，此时我建议放弃努力追求更高的投资回报率。