Html 如何优化重复模糊同一图像

这可能会让人困惑，所以让我解释一下

我有一个页面，上面有一个巨大的图像：

+-------------+
|             |
|             |
| image       |
|             |
|             |
+-------------+

在这一页上，我试图将内容和背景叠加为下面图像的模糊版本

+-------------+
| image       |
|             |
| +-+ +-+     |
| |b| |b|     |
| +-+ +-+     |
+-------------+

我现在在内容中添加了一个div，背景图像与div的位置相反。然后将此图像应用于css3属性

blur:？px.

有关示例，请参见此处：

它工作得很好，除非页面上有很多框。我显示的框越多，我需要的背景图像就越多，需要模糊的图像就越多，因此，任何动态交互都会变得更加锯齿状/滞后（褪色、过渡等）

我可以做些什么来优化它

---

编辑：忘了提及，这是一个chrome扩展web应用程序，无法下载这些图像并对其进行预模糊。此外，所有图像都来自外部域，因此不能使用canvas，这是一个非常严格的设置。看起来没有符合你标准的答案。Canvas对于相同的来源来说是最好的。问题是我在chrome扩展中运行。我被关得很紧这些都来自一些URL吗？都来自Flickr。即使我下载了图像（不确定如何存储它们，这似乎是为了发送JSON/XML），我该如何模糊它们？我建议使用photoshop或任何其他图形编辑器来模糊图像，并将其导出为png/jpg/gif，然后用当前图像替换，既然你想让图像变得模糊，为什么不创建一个呢@圣约翰森