backdrop-filter 实现局部背景模糊需满足三层结构：背后有内容、中间是带 alpha 的透明层、层上应用 backdrop-filter: blur()；禁用 overflow-scrolling、控制 blur 值≤8px，并为旧浏览器提供伪元素模糊图片 fallback。
用 backdrop-filter 实现局部背景模糊（现代浏览器首选）
直接在需要模糊背景的容器上加 CSS，前提是它得是「半透明遮罩层」且背后有可穿透的内容。比如一个弹窗、侧边栏或导航栏：
常见错误是给 或 加 backdrop-filter——没用，因为它们背后没有「可被模糊的底层内容」；必须是叠加在其他内容之上的元素，且自身带透明度。
-
backdrop-filter: blur(8px);是核心，数值越大越糊，但别超过 20px，否则性能明显下降 - 必须配合
background-color: rgba(255, 255, 255, 0.7);（或其他带 alpha 的色值），纯transparent会导致模糊失效 - 注意 Safari 15.4+ 和 Chrome 102+ 才稳定支持；旧版 Safari 需加
-webkit-backdrop-filter - 不要在滚动区域内部频繁触发的元素上滥用，iOS 上可能引发重绘卡顿
fallback 方案：用伪元素 + 模糊图片模拟（兼容 IE/Edge 旧版）
当目标环境不支持 backdrop-filter 时，可以手动截一张页面快照（或用 Canvas 动态生成），模糊后作为伪元素背景。但更实际的做法是静态 fallback：
- 先用
::before绘制一层模糊图：background-image: url("blur-bg.jpg"); - 再用
filter: blur(6px);对该伪元素本身做模糊（注意：这是对图片自身模糊，不是 backdrop） - 最后用
z-index控制层级，确保它在内容之下、真实背景之上 - 缺点：无法响应式跟随滚动或缩放；图片需提前生成，且尺寸要覆盖最大视口
为什么不用 filter: blur() 直接作用于父容器？
因为 filter: blur(10px) 会模糊「整个元素及其所有子节点」，包括文字、按钮、图标——这不是背景模糊，是整块糊掉。你看到的“背景模糊”效果，本质是「只模糊背后的东西，不碰自己」，这正是 backdrop-filter 的语义。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
若强行用 filter，唯一可行路径是把背景和前景拆成两个绝对定位的兄弟元素，再对背景层单独加 filter。但这样破坏 DOM 结构语义，且滚动同步、z-index 管理极易出错。
移动端真机调试时容易忽略的关键点
iOS Safari 对 backdrop-filter 有额外限制：如果容器设置了 overflow: scroll 或启用了弹性滚动（-webkit-overflow-scrolling: touch），模糊可能突然失效或闪烁。解决方案很具体：
- 避免在
position: fixed+overflow-y: auto的弹窗上直接使用，改用position: absolute+ 手动控制高度 - 禁用
-webkit-overflow-scrolling（它已废弃，且与 backdrop-filter 冲突） - 在 iOS 上测试时，务必关掉「减少动画」系统设置，否则 backdrop-filter 会被强制禁用
- Android Chrome 一般没问题，但低端机上
blur(12px)可能导致内存爆涨，建议上限设为8px
