CSS3模糊覆盖层

Question

CSS3模糊覆盖层

3

我将尝试创建一种覆盖整个页面并模糊背景的叠加层。我搜索了解决方案，并尝试过多个带有CSS3模糊滤镜的版本，但均未成功。主要问题在于当body标签具有背景时，它不会被模糊。

以下是一个示例：

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文件，以便可以通过程序使用它在多个页面上实现此目标。

- Boris

那么你想要背景图片模糊还是不模糊？ - Jonas Zell

请看这里：https://gordonlesti.com/css-blur-overlay/ - Gerard

https://dev59.com/fGIj5IYBdhLWcg3wpWlx - user7637140

是的，我尝试过模糊背景。谢谢，我会尝试SVG解决方案。 - Boris

2个回答

3

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

body {
    filter: blur(2px);
}

或者你可以使用一个全屏的 div（就像你现在的一样），然后只需调整 z-index 即可。但我不建议在 body 上设置背景。没有必要。

- jdmdevdotnet

2

我尝试过了，但它会使一切变模糊，而我想让div保持未模糊状态。 - Boris

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

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

- Lyres · Accepted Answer

这个问题现在可能更容易通过CSS属性 backdrop-filter: blur(5px); 来解决。