如何模糊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>