直接给<img>加filter: blur()不行，因为它模糊的是图片自身而非背后内容；正确做法是用伪元素+background-image或backdrop-filter实现真毛玻璃效果。
直接给 <img> 加 filter: blur() 为什么不行
因为 filter: blur() 模糊的是元素自身渲染内容，不是它背后的页面——<img> 标签没有“背后”，只有自己这张图。你加了 blur(8px)，结果只是把这张图糊掉，底下如果是白色背景或固定色块，就只是“一张糊图”，毫无毛玻璃感。
常见错误写法：img { filter: blur(8px); opacity: 0.7; }。这等于先糊图、再半透明盖在白底上，视觉上就是灰蒙蒙一块，不是虚化背景。
- 模糊目标错了：你要虚化的不是图片，是图片所在容器“后面的真实滚动内容”
-
<img>是独立渲染单元，无法感知父级或 body 的滚动内容 - 即使设
position: absolute+z-index: -1，它仍只是个静态图层，不随滚动“透出真实背景”
用伪元素 + background-image 实现可控背景模糊
正确做法是把图片当背景，用 ::before 伪元素承载并模糊，主容器负责内容层叠。这样既能复用同一张图资源，又能精准控制模糊区域和裁剪边界。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
background: url(...)或显式声明背景来源（不能只靠子元素撑开） - 伪元素需
content: ""+position: absolute+ 宽高 100% +background: inherit -
background-position和background-size必须显式写，否则继承后可能偏移或拉伸 - 别漏
z-index，否则文字会被糊图盖住
示例结构：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
div.bg-blur {
position: relative;
background: url('photo.jpg') no-repeat center;
background-size: cover;
height: 400px;
}
div.bg-blur::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: inherit;
background-position: center;
filter: blur(10px);
z-index: -1;
}
backdrop-filter 才是真·毛玻璃，但得注意兼容性和写法
如果目标是让某个半透明卡片“虚化它背后滚动的页面内容”，backdrop-filter 是唯一正解。它专为“背后内容”设计，不影响卡片内文字、按钮等子元素清晰度。
但有两个硬门槛：
- 元素必须有半透明背景，比如
background: rgba(255, 255, 255, 0.7)；纯 white 或 transparent 都看不到效果 - Safari 必须加
-webkit-backdrop-filter，且 iOS 15.4+ 才稳定支持blur()值
典型写法：
.glass-card {
background: rgba(255, 255, 255, 0.65);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-radius: 12px;
}
注意：backdrop-filter 在 Firefox 桌面版默认关闭（需 about:config 开启 layout.css.backdrop-filter.enabled），生产环境建议做降级处理，比如 fallback 到纯 background + opacity。
blur 值越大越糊？小心移动端卡顿和裁切黑边
blur(12px) 在桌面 Chrome 看着自然，但在 iPhone 上可能触发降级渲染，甚至出现块状噪点（iOS 16.4 之前已知问题）。更隐蔽的问题是溢出裁切——模糊会向四周扩散像素，若父容器设了 overflow: hidden，哪怕只多出 0.3px，边缘也会被硬裁成黑边或暗角。
- 安全值区间：背景虚化推荐
blur(6px)–blur(12px)，首屏大图慎用 >10px - 防裁切方案：给父容器加
padding或用margin: -2px补偿模糊溢出（需配合box-sizing: border-box） - 高 DPR 设备（如 Retina 屏）下，
blur(10px)实际模糊强度 ≈ 普通屏的blur(20px)，建议用媒体查询微调：@media (-webkit-min-device-pixel-ratio: 2) { .bg-blur::before { filter: blur(6px); } }
真正难处理的从来不是怎么写那行 filter，而是模糊之后，谁来兜底溢出、谁来兼容 Safari、谁来防止重绘卡顿——这些细节不提前想清楚，上线后第一眼看到的就是黑边、闪帧、或者整页变糊。
