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

Question

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

就像这样，或iOS上的许多模糊的popovers：

Answer 1

你可以使用svg解决方案like here或画布解决方案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>