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

Question

对于网页任意区域（包括但不限于图片、元素）是否有模糊化的可行方案？

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

Answer 1

您可以使用 svg 解决方案 like here or canvas solution 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>

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

How to blur arbitrary area on web page?

javascript

css

web

blur

css-filters