Question

我正在尝试创建覆盖整个网站页面的叠加层并模糊其背后的所有内容。我搜索了解决方案，尝试了CSS3模糊过滤器的多个版本，但没有成功。主要问题是当身体标签有背景时，它不会模糊。

玩具示例：

body
{
  background: url("https://upload.wikimedia.org/wikipedia/commons/8/8a/Too-cute-doggone-it-video-playlist.jpg");
   
}

h1
{
  text-align: center;
}

#overlay
{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-filter: blur(10px);
}

<html>
<head></head>
<body>
  <h1>
     Text
  </h1>
  
  <div id="overlay">
      overlay
  </div>
</body>
</html>

我想尝试模糊叠加div后面的所有内容。如果我将模糊添加到h1（或者如果我将其包装在其他div中并在该div上添加模糊）我可以达到接近解决方案，但没有背景模糊。

是否有任何解决方案可以满足所有要求？

想法是创建一个JavaScript文件，以编程方式执行此操作，以便我可以在多个页面上使用。

Answer 1

您可以将filter属性与blur一起使用，但不受广泛支持：http://jsfiddle.net/GkXdM/1/。它在Chrome上受支持，但在整个页面上使用它会带来很大的性能损失。

body {
    filter: blur(2px);
}

或者您可以使用全屏幕的div（就像您一样）并调整z-index。我不建议在身体上放置背景。没理由。

Answer 2

现在可以使用CSS属性backdrop-filter: blur(5px);

轻松解决此问题

CSS3模糊叠加

2 个答案: