作为一种纯粹的美学设计，我想知道是否有可能让一个背景不透明的元素模糊掉背后的内容。
更具体地说，当我出现模式框时（作为我的自定义警报/确认/提示设置的一部分），当前背景内容通过在屏幕上设置与文档背景相同颜色的掩码而"褪色"。
我想做的是对屏蔽的内容应用少量模糊（只有几个像素），以进一步将注意力引向模态框。
浏览器兼容性不是问题，因为正如我所提到的，这纯粹是美学问题。最好我希望它至少能在IE9中工作，如果可能的话，还能在Chrome中工作。
此外，没有jQuery。无论如何，如果你愿意，可以在jQuery中提供答案，但在让它靠近我的网站之前，我会把它翻译成原始JS。
现在您可以使用backdrop-filter CSS属性。
CSS：
.modal {
backdrop-filter: blur(10px);
}
使用纯CSS是不可能的。。
- 您可以使用（及其限制）html2canvas脚本将页面渲染到画布上
- 然后模糊图像或你想要的部分http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
- 使用
toDataUrl获取图像并将其用作弹出窗口的背景
这是一个相当复杂的过程，需要大量的javascript，但我相信这是唯一的方法…
这将需要javascript（以及相当复杂的javascript）。
据我所知，这听起来像是你在试图创造一种"Aero glass"效果，半透明元素后面的内容被赋予模糊效果。单独使用HTML和CSS是不可能的（除非您考虑只使用IE过滤器）。
目前，还没有任何CSS属性可以像您所描述的那样动态应用图像过滤器。
Gaby提出的html2canvas解决方案可能有些过头了。你可以用同一个网站的iframe获得同样的效果，该网站已经被模糊了（通过滤镜模糊或另一种技术——"-webkit滤镜：模糊（2px）"——据我所知，只在chrome中有效。
也就是说，我想说这两种解决方案都非常糟糕，我个人永远不会使用任何一种。出于好奇，我试了一下，看看这是否可行。
请在此处查看（仅限chrome）示例：https://s3.amazonaws.com/blur-demo/index.html