如何模糊网页上的任意区域？

【问题标题】：How to blur arbitrary area on web page?如何模糊网页上的任意区域？
【发布时间】：2017-04-17 13:30:14
【问题描述】：

是否有任何可行的解决方案来模糊网页上的任意区域（包括但不限于图像、元素）？

就像这样，或者 iOS 上的许多模糊弹出框：

【问题讨论】：

可能对您的搜索有所帮助：stackoverflow.com/questions/20039765/…
您只需要获取模糊区域的 x 和 y（上、左）位置的随机数，然后将 CSS filter: blur() 应用于占据该区域的元素。 stackoverflow.com/questions/20039765/…
在 CSS 和 HTML 中可能无法模糊弹出窗口下方的随机/动态区域。但是可能会模糊整个页面，请检查此（jsfiddle.net/jo_Geek/1t1c6kpp），滚动到底部并单击按钮以显示警报。
@Waxi 谢谢！但它是关于图像和元素的。
@ScottMarcus 该区域模糊，但不透明。试过：i.stack.imgur.com/czC0b.png

【解决方案1】：

您可以使用 svg 解决方案 like here 或 canvas 解决方案 like here 但在不久的将来我们将只使用 css 来实现它，webkit 功能背景过滤器目前仅适用于 safari。在 safari 上试试 sn-p 看看它是如何工作的。

body{
    margin:0px;
    }

.container{
    position:relative;
    height:100vh;
    width:100%;
    background-image:url(http://cdn.playbuzz.com/cdn/d2b06305-f201-4127-8eb7-7410bcc0de02/2d6c2415-2b8c-430c-87a4-c516409d8488.jpg);
    background-size: cover;
    background-position:center center;
    }
    
.blur{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:200px;
    height: 100px;
    -webkit-backdrop-filter: blur(5px);
    }

<div class="container">

    <div class="blur"></div>

</div>

【讨论】：

谢谢！试过了：i.stack.imgur.com/OtcBW.png 它确实在 macOS 上的 Safari 上工作。 Chrome 和 Internet Explorer 上的任何解决方案？