CSS3 模糊叠加
[英]CSS3 blur overlay
问题描述
I am trying to create overlay that would cover whole site page and blur everything that is behind it.
我正在尝试创建覆盖整个网站页面并模糊其背后的所有内容的覆盖层。 I searched for solution, tried multiple versions with CSS3 blur filter, but without success.我搜索了解决方案，使用 CSS3 模糊过滤器尝试了多个版本，但没有成功。 Main problem is when body tag have background, it is not blurred.主要问题是当 body 标签有背景时，它不会模糊。
Toy example:玩具示例：
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>
I want to try to blur everything behind overlay div.我想尝试模糊覆盖 div 后面的所有内容。 If I add blur to h1 (or if I wrap it inside other div and add blur on that div) I could reach near solution, but without blur of background.如果我向 h1 添加模糊（或者如果我将它包裹在其他 div 中并在该 div 上添加模糊），我可以接近解决方案，但没有背景模糊。
Is there any solution that could fulfil all requests?有没有可以满足所有要求的解决方案？
Idea is to create a JavaScript file, that would do this programatically so that I could use on multiple pages.想法是创建一个 JavaScript 文件，该文件将以编程方式执行此操作，以便我可以在多个页面上使用。
2 个解决方案
解决方案1
3 2020-03-09 23:25:23
现在使用 css 属性backdrop-filter: blur(5px);可能更容易解决这个问题backdrop-filter: blur(5px);
解决方案2
2 已采纳 2017-06-06 20:15:03
You can use the filter property with blur , although it's not widely supported: http://jsfiddle.net/GkXdM/1/ .您可以将filter属性与blur ，尽管它没有得到广泛支持： http : //jsfiddle.net/GkXdM/1/ 。 It's supported on Chrome, but it comes with a big performance penalty when used on the whole page.它在 Chrome 上受支持，但在整个页面上使用时会带来很大的性能损失。
body {
filter: blur(2px);
}
Or you can just use a div that's full screen (like you have) and just adjust the z-index .或者您可以只使用全屏的 div （就像您拥有的那样）并调整z-index 。 I wouldn't suggest putting an background on the body though.不过，我不建议将背景放在身体上。 No reason for that.没有理由这样做。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.