这可能会令人困惑，所以让我解释一下。
我有一个页面，上面有一个巨大的图像：
+-------------+
| |
| |
| image |
| |
| |
+-------------+
在此页面上，我尝试将内容与背景叠加为下图的模糊版本。
+-------------+
| image |
| |
| +-+ +-+ |
| |b| |b| |
| +-+ +-+ |
+-------------+
我目前正在通过在内容中添加一个 div 来做到这一点，该内容的背景图像与 div 的位置相反。然后将此图像应用 css3 属性blur: ?px.
见这里的例子：http: //jsfiddle.net/Z83wR/1/
它工作得很好，除非页面上有很多框。我显示的框越多，我需要的背景图像就越多，我需要模糊的图像越多，因此，任何动态交互变得越锯齿/滞后（淡入淡出、过渡等）。
我能做些什么来优化这个？
编辑：忘了提，这是一个 chrome 扩展网络应用程序，无法下载这些图像并对其进行预模糊。此外，所有图像都来自外部域，因此不能使用画布