Bor*_*ris 3 html javascript css
我正在尝试创建覆盖整个网站页面并模糊其后面的所有内容的叠加层。我寻找解决方案，尝试使用 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 文件，以编程方式执行此操作，以便我可以在多个页面上使用。
| 归档时间： |
|
| 查看次数： |
8295 次 |
| 最近记录： |