CSS3模糊覆盖层

我正在尝试创建覆盖整个站点页面并模糊其背后的所有内容的覆盖层。我搜索了解决方案，尝试了使用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>

我想尝试模糊覆盖层后面的一切。如果我将模糊添加到H1(或者如果我将其包裹在其他Div中并在该div上添加模糊(，则可以到达解决方案，但没有背景的模糊。

有没有解决所有请求的解决方案？

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

现在使用backdrop-filter: blur(5px);

现在可以更轻松地解决此问题。

您可以将filter属性与blur一起使用，尽管它没有得到广泛支持：http：//jsfiddle.net.net/gkxdm/1/。它在Chrome上得到了支持，但在整个页面上使用时会受到巨大的性能罚款。

body {
    filter: blur(2px);
}

或者您只需使用全屏(就像您拥有的那样(，然后调整z-index。我不建议在身体上放置背景。没有理由。

相关内容

最新更新

热门标签：