这可能令人困惑，所以让我解释一下。
我有一个页面上有一个巨大的图像：
+-------------+
| |
| |
| image |
| |
| |
+-------------+
在这个页面上，我试图将背景叠加为下面图像的模糊版本。
+-------------+
| image |
| |
| +-+ +-+ |
| |b| |b| |
| +-+ +-+ |
+-------------+
我目前正在这样做，方法是在内容中添加一个div，背景图像位于div所在的位置。然后将此图像应用于css3属性blur: ?px.
请点击此处查看示例：http://jsfiddle.net/Z83wR/1/
除非页面上有很多方框，否则效果很好。我展示的盒子越多，我需要的背景图像就越多，我需要模糊的图像就越多，结果，任何动态交互变得越来越锯齿/延迟（淡入淡出，过渡等）。
我可以做些什么来优化它？
编辑：忘记提及，这是一款Chrome扩展程序网络应用，无法下载这些图像并预先模糊它们。此外，所有图像都来自外部域，因此不能使用canvas