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

Question

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

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

是否可以使用jQuery将模糊应用于不同来源的iframe几秒钟？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您只需通过CSS3应用模糊滤镜：

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

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

Answer 3

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