Javascript 当背景重复时，如何使用CSS/SVG/Canvas/任何其他方法应用模糊背景？

我试图弄清楚如何在HTML、CSS、JS和其他必要的格式中添加背景模糊的透明内容元素。问题在于兼容性，以及我使用的是重复的背景

您可以在下面看到各种获得效果的方法，前景在不重复的图像背景上模糊。你可以。你也可以。问题是，我能找到的唯一方法是在重复的背景中获得这种效果，它使用CSS特性来解决兼容性问题，比如or，这确实是个问题。SVG，取决于您如何使用它，可以是或

---

我试图得到下面的效果，在同一个透明、模糊的内容元素后面有一个重复的背景。我该怎么做呢

• 不需要背景图像的模糊版本（有很多）

• 能够重复背景

• 期望与几乎所有现代浏览器兼容，包括IE，至少支持IE8

• 不需要将内容元素与重复的背景对齐（已经想到了这种攻击，但它破坏了重复背景的目的和多功能性）

我忍不住想我错过了什么。提前谢谢

---

这是不可能的，因为有一个约束条件，即它可以回到IE8，除非您愿意编写一整套javascript，以将单独模糊覆盖元素的大小和位置与背景内容同步，您已经说过您不愿意这样做

这是可以使用画布的，只要您愿意使用自定义画布代码在画布中完成全部工作（包括背景），可以追溯到IE9。毕竟只是像素而已

只要您的背景也在Canvas/SVG中，就可以使用SVG或Canvas实现这一点，可以追溯到IE10，使用自定义的Canvas代码或稍微扭曲的SVG过滤器

---

在某些边缘浏览器中，仅使用CSS（背景混合模式）就可以实现这一点。

我选中了。我需要重复一遍，这与前面提到的方法不符。这不是重复选项1肯定不会发生，不是因为我不愿意投入时间，而是因为它根本不实用（尽管我很高兴听到相反的观点）。就兼容性而言，选项2相当不错，而且也相对简单（尽管将高斯模糊算法编码到画布中可能并不简单）。选项3失去了与选项2的兼容性，我不确定矢量图形系统处理光栅化图像的效率。选项4是一个很好的选项，但有点超前于时代（Chrome和Safari的信誉）。总的来说，选择很好。