Javascript 实时背景上的css模糊效果

我在寻找一种模糊/玻璃化背景的方法，以创建一些覆盖和对话框。我偶然发现了许多可能的解决方案，但没有一个符合我的要求

您可以通过使用同一图像的两个版本（原始+模糊）来解决此问题，然后在叠加背景中偏移模糊版本，或者您可以使用一些疯狂的东西，如html2canvas，创建快照，基本上使用第一个解决方案

问题是，这根本不是“活的”。如果DOM中发生了变化，您将无法捕捉到它，特别是如果您只是使用单个图像的模糊版本

拯救壁虎？

Firefox/Gecko很久以前就引入了一个非常好的css特性，名为

element（）

。它允许您只克隆live DOM中任何元素的面。这非常方便，可以解决我原来的问题，它看起来是这样的：

演示：（不幸的是，只适用于Firefox）

element（）

的好处在于，它是真实的活动元素，即使您在“目标”表面内移动其他元素，它也会立即反映在您的背景上。 尽管这项功能非常棒，但它只在Firefox中使用多年，所以我唯一的问题是，是否还有其他聪明的方法在webkit上创建类似的实时效果，这是我目前无法想到的。

//Js仅用于拖动文章
$（函数（）{
$（“文章”）.draggable（）；
});
html{
背景：url(https://2.bp.blogspot.com/-LwilPQw9Zc0/Unzm09oXDxI/AAAAAAAAHwo/30a7ZqSp3jE/s1600/blur-static+.jpg）无重复50%固定；
背景尺寸：封面；
}
身体{
宽度：100%；
最小高度：100%；
背景：继承；
溢出：隐藏；
}
文章{
背景：继承；
位置：相对位置；
宽度：60%；
保证金：10vh自动15vh；
边界半径：15px；
边框：10px实心rgba（255255.15）；
盒影：1px1p4pRGBA（0,0,0,3）；
z指数：5；
字体大小：1.4rem；
光标：移动；
}
文章：之前{
内容：''；
位置：绝对位置；
顶部：0；左侧：0；右侧：0；底部：0；
背景：继承；
过滤器：模糊（5px）；
-webkit过滤器：模糊（6px）；
-moz滤波器：模糊（6px）；
-o-滤波器：模糊（6px）；
-ms滤波器：模糊（6px）；
过滤器：url（#blur）；过滤器：progid:DXImageTransform.Microsoft.blur（PixelRadius='6'）；
}

模糊效果
@user5014677，你看过问题了吗？对我来说，这听起来非常合理。@user5014677，这不是为了检查代码并使其更好，而是为了使其能够在跨浏览器中运行，这是本文的主题。@zzzzBov在dup中给出了答案。帖子有点过时了（这是在filter:blur可用之前）。@K3N并没有减少重复，只是意味着是时候赏金了。@zzzzBov没关系，我看到上面的答案已经用过滤器解决方案更新了。你也许应该对代码的功能添加一些解释。另外，拖动f.ex。一个位于上面部分之上的底部元素，它们不会显示出来（否则看起来不错）。当我启动代码段时，它是works，当我滚动它时，它会中断并变为正常。在大约1秒的延迟后，它再次变得透明（使用最新的FF），尽管如此，这还是很棒的。即使如此，这个解决方案也没有涵盖
css element（）
中的“活动”方面。也就是说，它不会模糊下面的其他DOM元素。