实时背景上的CSS模糊效果[重复]答案

【问题标题】：css blur effect on a live background [duplicate]实时背景上的CSS模糊效果[重复]
【发布时间】：2018-01-29 15:14:34
【问题描述】：

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

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

问题是，这根本不是“活”的。如果 DOM 发生变化，您不会察觉，尤其是在您使用单个图像的模糊版本时。

壁虎来救援？

Firefox/Gecko 很久以前就引入了一个相当不错的 CSS 功能，称为 element()。它允许您只克隆实时 DOM 中任何元素的面。这很方便，可以解决我原来的问题，它看起来像这样：

演示：https://codepen.io/anon/pen/prLBpQ（不幸的是，仅适用于 Firefox）。

element() 的伟大之处在于，它是真实的，即使您在“目标”表面内移动其他元素，它也会立即反映在您的背景上。尽管这个功能很棒，但它多年来只在 Firefox 中可用，所以我唯一的问题是，是否有任何其他聪明的方法可以在 webkit 上创建类似的实时效果，这是我目前想不到的。

【问题讨论】：

@user5014677，你读过这个问题吗？对我来说这听起来很合理。
@user5014677，这不是审查代码并使其变得更好，而是使其具有跨浏览器功能，是 SO 的主题。
@zzzzBov dup 中的答案。帖子有点过时（这是在 filter:blur 可用 f.ex. 之前）。
@K3N，这并没有减少它的欺骗性，只是意味着是赏金的时候了。
@zzzzBov 没关系，我看到最佳答案已更新为过滤器解决方案

标签： javascript html css firefox

【解决方案1】：

// 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');
}

<article>
<h2>Blur effect</h2>
</article>

<svg version="1.1" xmlns='http://www.w3.org/2000/svg'>
 <filter id='blur'>
   <feGaussianBlur stdDeviation='6' />
   </filter>
</svg>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

【讨论】：

您或许应该对代码的作用添加一些解释。另外，拖动 f.ex。在上述某些元素之上的底部元素，它们不会显示出来（否则看起来不错）。
当我启动 sn-p 时，当我滚动它时它会中断并变得正常。大约 1 秒延迟后，它再次变得透明（使用最新的 FF）
这还是很棒的。
尽管如此，这个解决方案并没有涵盖来自css element() 的“实时”方面。意味着，它不会模糊下面的其他 DOM 元素。