javascript - 如何模糊div后面的动态内容？(How can I blur the dynamic contents behind a div?)

Question

Im working on a project with a full screen styled google maps page.(我正在处理一个具有全屏样式的Google地图页面的项目。)

Is there any way (css, jQuery, or other options...) to overlay a header and a slide-in sidebar with a blur effect similar to the iOS frosted/blur effect?(有什么方法（css，jQuery或其他选项...）以类似于iOS磨砂/模糊效果的模糊效果覆盖标题和滑入式侧边栏？)

Im trying to achieve something like this.(我试图实现这样的目标。)

Sample blurred header(样本模糊标头)

My problem is, because I don't control what is underneath the header and it constantly changes I can't use the 2 image trick to simulate a blurred background.(我的问题是，因为我无法控制标题下面的内容，并且它不断变化，所以我无法使用2图像技巧来模拟模糊的背景。)

Any suggestions?(有什么建议么？)   ask by Steven Pantin translate from so

Answer 1

Read this post https://stackoverflow.com/a/19688466/1663572 and related link http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript(阅读这篇文章https://stackoverflow.com/a/19688466/1663572和相关链接http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript)

The solution uses this steps.(解决方案使用此步骤。)

1. Render the HTML(渲染HTML)
2. Duplicate the content area and convert it to canvas.(复制内容区域并将其转换为画布。)
3. Move the Canvas to the Header part(将画布移动到页眉部分)
4. Sync the scroll of the content with the canvas in the header(将内容的滚动与标题中的画布同步)

Down on the page is an example (the narrow one).(下面是一个示例（狭窄的示例）。)

There is some missing image or something else and it is a bit spilled but try scrolling.(缺少一些图像或其他东西，虽然有点溢出，但请尝试滚动。) But I'm not sure about frequency of changes of the content you were mentioning.(但是我不确定您提到的内容更改的频率。) This could be causing serious performance issues.(这可能会导致严重的性能问题。) But try it.(但是尝试一下。)

I don't think of any other option to achieve very comlicated think you want.(我认为没有其他选择可以实现您想要的非常复杂的想法。)