在实时背景上应用CSS模糊效果

Question

在实时背景上应用CSS模糊效果

5

我在寻找一种方法来模糊/玻璃化背景，以创建一些叠加层和对话框。我发现了很多可能的解决方案，但没有一个符合我的要求。你可以通过使用两个版本的相同图像（原始+模糊）来解决此问题，然后在叠加背景中偏移模糊版本，或者您可以可能使用一些疯狂的东西，如html2canvas，创建快照并基本上采用第一个解决方案。问题是，这根本不是“真实的”。如果DOM中有任何更改，您都无法捕获它，尤其是如果您只使用单个图像的模糊版本。Firefox / Gecko引入了一个非常好的CSS功能，称为element()，它允许您仅克隆您的实时DOM中任何元素的面部。这非常方便，以解决我的原始问题，并且看起来像这样： https://istack.dev59.com/sxAz0.webp 演示：https://codepen.io/anon/pen/prLBpQ（不幸的是，仅适用于Firefox）。element()的最棒之处在于，它是真正的实时的，即使您将其他元素移动到“目标”表面内，它也会立即反映在您的背景上。尽管这个功能很棒，但多年来它仅在Firefox中提供，因此我的唯一问题是，如果有其他聪明的方法可以在WebKit上创建类似的实时效果，在目前我还想不到。

- jAndy

4

@user5014677，你有看到这个问题吗？我觉得它完全合理。 - zzzzBov

3

@user5014677，这不是关于审查代码并使其更好，而是关于使其能够跨浏览器运行，这*与SO的主题相关。 - zzzzBov

1

@zzzzBov，重复帖子中的答案有点过时（这是在 filter:blur 可用之前）。 - user1693593

1

@K3N，这并不意味着它不是重复问题，只是意味着现在是时候设置赏金了。 - zzzzBov

1

@zzzzBov 不用在意，我看到最佳答案已经更新了一个过滤器解决方案。 - user1693593

显示剩余9条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- syntaxe · Accepted Answer

// 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>