CSS3 模糊叠加

Question

我正在尝试创建覆盖整个网站页面并模糊其背后的所有内容的覆盖层。 我搜索了解决方案，使用 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 文件，该文件将以编程方式执行此操作，以便我可以在多个页面上使用。

Answer 1

现在使用 css 属性backdrop-filter: blur(5px);可能更容易解决这个问题backdrop-filter: blur(5px);

Answer 2

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

body {
    filter: blur(2px);
}

或者您可以只使用全屏的 div （就像您拥有的那样）并调整z-index 。 不过，我不建议将背景放在身体上。 没有理由这样做。

CSS3 模糊叠加

问题描述

2 个解决方案

解决方案1
3 2020-03-09 23:25:23

解决方案2
2 已采纳 2017-06-06 20:15:03

CSS3 模糊叠加

问题描述

2 个解决方案

解决方案1 3 2020-03-09 23:25:23

解决方案2 2 已采纳 2017-06-06 20:15:03

解决方案1
3 2020-03-09 23:25:23

解决方案2
2 已采纳 2017-06-06 20:15:03