通过将页面主体内容包裹在独立容器中，并仅对该容器应用 CSS filter: blur()，即可在弹出窗口显示时模糊背景，同时保持弹窗内容清晰锐利。
通过将页面主体内容包裹在独立容器中，并仅对该容器应用 css `filter: blur()`，即可在弹出窗口显示时模糊背景，同时保持弹窗内容清晰锐利。
实现背景模糊（Backdrop Blur）效果的关键在于DOM 结构隔离：必须确保被模糊的元素是弹窗的兄弟节点（而非父节点），否则 filter: blur() 会级联作用于其所有子元素——包括弹窗本身，导致内容失真。
✅ 正确结构示例
将主页面内容（如 <section>）包裹在一个专用容器（如 <div id="blurme">）内，而弹窗 <div id="field"> 与其同级并列，二者共同作为 <body> 的直接子元素：
<body>
<div id="blurme">
<section>
<a id="forgot">Forgot your password? Press me</a>
</section>
</div>
<div id="field">
<div id="content">
<p>Here you can set your password back</p>
</div>
</div>
</body>✅ JavaScript 控制逻辑
点击触发时，仅显示弹窗并为 #blurme 添加模糊滤镜；关闭时需同步移除（推荐补充关闭逻辑）：
const forgotField = document.getElementById('field');
const forgot = document.getElementById('forgot');
const blurElement = document.getElementById('blurme');
// 显示弹窗 + 模糊背景
forgot.addEventListener('click', () => {
forgotField.style.display = 'block';
blurElement.style.filter = 'blur(5px)';
});
// 【可选】点击弹窗外区域关闭（增强体验）
document.addEventListener('click', (e) => {
if (e.target === forgotField || e.target.closest('#field')) return;
if (forgotField.style.display === 'block') {
forgotField.style.display = 'none';
blurElement.style.filter = 'none'; // 恢复清晰背景
}
});⚠️ 注意事项
- 避免 filter 应用于 <body> 或 <html>：它们是弹窗的祖先节点，会导致弹窗也被模糊；
- 性能提示：blur() 是高开销滤镜，建议模糊值控制在 2px–8px 范围内，避免过度影响渲染性能；
- 可访问性补充：模糊背景可能降低对比度，建议搭配半透明遮罩层（如 ::before 伪元素 + rgba(0,0,0,0.3)）提升可读性与视觉层次；
- 移动端兼容性：现代浏览器（Chrome 52+、Firefox 51+、Safari 9+）均支持 filter: blur()，无需额外前缀。
通过这种结构解耦 + 精准作用域控制的方式，即可优雅实现「弹窗清晰、背景柔焦」的专业视觉效果。
