我正在尝试找出如何在 HTML、CSS、JS 和其他任何必要的内容中添加具有模糊背景的透明内容元素。问题来自兼容性，以及我使用重复背景的事实。
您会在下面看到各种获得效果的方法，其中前景在 not-repeated 图像背景上变得模糊。你可以use a copy of the image with the blur photoshopped in .您也可以do it in newer browsers using CSS Filters or SVG .问题是，我能找到的在 repeated 背景下获得这种效果的唯一方法是使用具有兼容性问题的 CSS 功能，例如 CSS Filters或 CSS Regions ，这真的aren't compatible with anything . SVG，取决于你如何使用它，可以是 buggy或 reasonably compatible .
我试图获得下面的效果，在相同的透明、模糊的内容元素后面有一个重复的背景。我该怎么做，同时
不需要背景图像的模糊版本(有很多)
能够重复背景
期望与几乎所有现代浏览器兼容，包括 IE 至少回到 IE8
不需要将内容元素与重复背景对齐(已经想到了那个 hack，但它破坏了重复背景的目的和多功能性)
我忍不住想我错过了什么。提前致谢。
最佳答案
这是不可能的，因为它可以返回到 IE8，除非你愿意编写一整套 javascript 来同步一个单独的模糊覆盖元素的大小和位置与背景内容——你已经说过了你不愿意做。
使用 Canvas 是可能的，只要您愿意使用自定义 Canvas 代码在 Canvas 中完成所有事情(包括背景)，最早可追溯到 IE9。毕竟它只是像素。
这可以使用 SVG 或 Canvas，只要您的背景也在 Canvas/SVG 中，早在 IE10 使用自定义 Canvas 代码或有些扭曲的 SVG 过滤器。
这可以在某些边缘浏览器中仅使用 CSS(背景混合模式)。
关于javascript - 当背景重复时，如何使用 CSS/SVG/Canvas/其他方法应用模糊背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25269511/