如何像模糊图像一样模糊 iframe？答案

【问题标题】：How do I blur an iframe like I blur an image?如何像模糊图像一样模糊 iframe？
【发布时间】：2015-06-10 07:38:03
【问题描述】：

有没有办法使用 jQuery 将 iframe 模糊几秒钟？它应该看起来像高斯模糊，例如在 Photoshop 中。（这里是example image，见右侧）

iframe 中显示的链接来源不同，这就是我一直在努力解决这个问题的原因。无法修改 iframe 的内容。

是否可以使用 jQuery 仅在几秒钟内对不同来源的 iframe 应用模糊？

【问题讨论】：

【解决方案1】：

您可以模糊 CSS 3 中的任何元素：

#iframe-container {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

<div id="iframe-container">
  <iframe src="//example.com"></iframe>
</div>

【讨论】：

【解决方案2】：

您可以通过 CSS3 应用模糊滤镜：

$("iframe").css("filter","blur(5px)")

不要忘记填充过滤器属性。也许您可以考虑将一个类应用于具有适当属性的 iframe，如您所见here

【讨论】：

【解决方案3】：

iframe.contents().find('body').blur()

【讨论】：