css模糊效果在实时背景上

Question

我一直在寻找一种模糊/玻璃背景的方法来创建一些叠加和对话框。我偶然发现了许多可能的解决方案，但它们都不符合我的要求。

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

问题是，那不是“活着”。一点都不如果DOM中的某些内容发生了变化，您就无法捕获它，尤其是如果您只是使用单个图像的模糊版本时。

Gecko救援？

很久以前，Firefox / Gecko引入了一个名为element()的非常好的css功能。它允许您只是克隆实时DOM中任何元素的面。这非常方便，解决我原来的问题，它看起来像这样：

演示：https://codepen.io/anon/pen/prLBpQ（仅在Firefox中有效）。

关于element()的好处是，即使你在＆＃34;目标中移动其他元素，它也是真实的。表面，它立即反映在您的背景上。 虽然这个功能非常棒，但它只能在Firefox中使用多年，所以我唯一的问题是，如果还有其他智能方法可以在webkit上创建类似的实时效果，我目前无法想到这一点。

Answer 1

javac

// Js only for drag the articles
$(function() {
	$( "article" ).draggable();
});

html {
  background: url(https://2.bp.blogspot.com/-LwilPQw9Zc0/Unzm09oXDxI/AAAAAAAAHwo/30a7ZqSp3jE/s1600/blur-static+.jpg) no-repeat 50% fixed;
  background-size: cover;
}
body {
  width: 100%;
  min-height: 100%;
  background: inherit;
  overflow: hidden;
}
article {
  background: inherit;
  position: relative;
  width: 60%;
  margin: 10vh auto 15vh;
  border-radius: 15px;
  border: 10px solid rgba(255,255,255,.15);
  box-shadow: 1px 1px 4px rgba(0,0,0,.3);
  z-index: 5;
  font-size: 1.4rem;
  cursor: move;
}
article:before {
  content: '';
  position: absolute;
  top: 0; left:0; right:0; bottom:0;
  background: inherit;
  filter: blur(5px); 
  -webkit-filter: blur(6px); 
  -moz-filter: blur(6px);
  -o-filter: blur(6px);
  -ms-filter: blur(6px);
  filter: url(#blur);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='6');
}