如何模糊iframe以模糊图像？

Question

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

在iframe中显示的链接不是同一个来源，这就是为什么我一直在为此而苦苦挣扎。无法修改iframe的内容。

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

Answer 1

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

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

不要忘记以填充过滤器属性。也许你可以考虑使用合适的属性将类应用到iframe中，你可以看到here

Answer 2

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

Answer 3

可以在CSS 3模糊任何元素：

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

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