您可以模糊div下方/后方的内容吗？ [英] Can you blur the content beneath/behind a div?

问题描述

我现在在Photoshop中创建一个新的网页设计，但我想知道是否可以模糊div下的内容。

I'm creating a new web design in Photoshop at the moment, but I'd like to know if it's possible to blur the content beneath a div?

我想在我的页面上创建一个半透明的 nav bar，它固定在屏幕顶部。一切流在下面/后面，我想模糊。对于那些有iDevice的iOS 7，查看Safari的标题;其中页眉下面的页面模糊。这是我正在寻找的效果。

I'd like to create a half transparent nav bar on my page that's fixed at the top of your screen. Everything that flows beneath/behind, I want to have blurred. For those of you that have an iDevice with iOS 7, check out Safari's header; where the page beneath the header is blurred. That's the effect what I'm looking for.

我不介意的效果不工作在旧的浏览器（IE8等），在这种情况下会有一个

I wouldn't mind the effect not working on older browsers (IE8 etc.), which in that case will have a 0.5 opacity white background as fallback.

推荐答案

可能是这个问题，在这种情况下：你可以用canvas和StackBlurforCanvas库来解决这个问题。请参见此

Possibly a duplicate of this question, in which case: you can pull this off with canvas and the StackBlurforCanvas library. See this

UPDATE：看起来这个功能已降落在Webkit的夜间版本中，因此最终您可能只能用CSS做到这一点。

UPDATE: It looks like this feature has landed in the Webkit nightly build, so eventually you may be able to do this with CSS only.

这篇关于您可以模糊div下方/后方的内容吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！