Javascript div后面的模糊背景

我想做一个弹出窗口，将出现后立即加载页面。此外，我希望黑色div后面的背景被模糊，不幸的是，在使用filter=blur（8px）之后，整个页面都被模糊了。 救命啊

window.onload=函数main（）{
document.body.style.backdropFilter=“blur（5px）”
document.body.style.background=“红色”
const add=document.createElement（'div'）
const total=document.createElement（'div'）
整体.style.width=“100%”
整体.style.height=“95vh”
总体.style.justifyContent=“中心”
total.style.display=“flex”
total.style.alignItems=“中心”
整体.filter=“模糊（8px）”
total.style.backgroundImage=“url(https://www.hgsm.pl/wp-content/uploads/2017/03/Pattern-Blue-Dots-background-patterns-pattern-wallpapers-1920x1080.jpg)"
add.style.display=“flex”
add.style.justifyContent=“中心”
add.style.alignItems=“中心”
add.style.width=“300px”
add.style.height=“400px”
add.style.background=“黑色”
常量元素=document.createElement（“img”）；
document.body.appendChild（总体）
总体。追加子项（添加）
}

奥普塔德

背景幕就可以了

backdrop-filter: blur(2px);

• 在覆盖元素（完全覆盖窗口的元素）上使用背景过滤器
• 不要忘记使用位置

  fixed

  和

  z-index

window.onload=函数main（）{
const add=document.createElement（'div'）
const total=document.createElement（'div'）
total.style.cssText=`
位置：固定；
z指数：1000；
左：0；
排名：0；
宽度：100vw；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景滤镜：模糊（5px）；
`;
add.style.cssText=`
位置：相对位置；
显示器：flex；
溢出：自动；
证明内容：中心；
对齐项目：居中；
宽度：50vw；
高度：50vh；
背景：白色；
`;
add.textContent=“你好，世界？”
总的来说，追加子项（add）；
文件.正文.附件（总体）；
document.body.style.background=“红色”
}

---

这是一些主体文本

你在模糊主体，主体恰好包含你的黑色div。你需要将你想要模糊的内容放在它自己的容器中，并模糊该容器而不是标题。即使它只是整体div被模糊，也无所谓。黑色div我也模糊了看，我更改了代码