Javascript 模糊div标记后面的所有对象（图像、div、文本..）

我需要你的帮助

我创建了一个静态的半透明横幅，它位于网站顶部。当用户滚动网站时，整个容器对象都会位于横幅下方。我希望所有的对象，图像，文本…等得到模糊的效果，因为它下的旗帜

---

谢谢

这在CSS和jQuery中都是不可能的。你也许可以用IE做点什么，但那当然只是IE，这会使你的CSS失效

目前，没有办法做到这一点，尽管css4中可能会出现一些东西

---

Chrome每晚都会构建，但至少目前还没有alpha模糊过滤器。

要做到这一点，唯一的方法是使用一些CSS和javascript。CSS不直接支持模糊，但是。使用一点jquery/css/javascript魔法，但会有问题，因为您无法部分模糊图像当只有部分图像在横幅下时会发生什么？。这可能是通过将图像分层并跟踪它们在屏幕上的位置来实现的，但所有这些似乎都是为了一个很小的回报而做的大量工作

---

因此，假设您已经决定对所有这些进行一次尝试，那么您将不得不使用javascript来确定页面的哪些部分已经在横幅下通过，并将样式应用于这些部分。此任务的难度将随页面布局的复杂性而增加。在最好的情况下，您的横幅和内容容器都是html正文的100%宽度。在这一点上，编写某种扫描器是相当简单的，每次页面滚动时都会遍历dom以查找应该应用模糊的元素。然而，最好的情况很少是眼前的情况，在这一点上，我建议放弃追求更高投资回报率的努力。

你所说的模糊影响是什么意思？这个问题需要更多的细节。目前我不确定你是想让图像变得模糊，还是想在图像上产生模糊效果，这是两个不同的东西。你能提供一个屏幕截图或链接到该网站，以便我们可以更好地可视化你在寻找什么吗？。在我写这篇文章的时候，它已经在Chrome nightlies中得到了支持。@bazmegakapa谢谢你的链接，但是OP并没有寻找一个alpha模糊过滤器。您甚至不能将模糊与alpha透明度结合起来，因为这只适用于元素本身，而不适用于它下面的内容。