我如何像模糊一个形象一样模糊一个iframe？

Question

是否有一种方法可以使用jQuery将iframe模糊几秒钟？它应该看起来像高斯模糊，例如在photoshop中。(这是一个示例图像，请看右边)

在iframe中显示的链接并不是相同的来源，这就是为什么我一直在努力解决这个问题。不可能修改iframe的内容。

是否有可能仅使用jQuery对不同来源的iframe应用模糊？

Answer 1

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

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

不要忘记填充过滤器属性。也许您可以考虑将一个类应用到iframe中，并使用您可以看到的这里的审批属性。

Answer 2

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

​

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

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

​

Answer 3

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