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

Question

有没有可行的方案可以模糊网页任意区域(包括但不限于图片、元素)？

就像这样，或者在 iOS 上有很多模糊的弹窗:

Answer 1

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

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>