backdrop-filter: blur() 对 <img> 无效是因为它只作用于背景区域，而 img 无透明背景层；需用 position: relative 容器+伪元素+半透背景实现，且注意浏览器兼容性与性能优化。
backdrop-filter: blur() 在图片上无效的常见原因
直接给 <img> 加 backdrop-filter: blur(10px) 不会生效，因为 backdrop-filter 只对「背景区域」起作用，而 <img> 本身没有透明背景层，它的内容是前景图像。浏览器没地方“模糊背后的东西”。
- 必须用伪元素（如
::before）覆盖在图片上方，并设为半透明，才能让backdrop-filter有可作用的背景（即图片本身） - 父容器需设
position: relative，伪元素才好定位盖住图片 - 伪元素必须有
background-color: rgba(255,255,255,0.3)这类带透明度的背景，否则看不到模糊效果（纯透明时视觉无变化） - Chrome 和 Safari 支持良好，但 Firefox 默认禁用
backdrop-filter（需用户开启layout.css.backdrop-filter.enabled，生产环境慎用）
用 ::before 伪元素实现毛玻璃遮罩的最小可行代码
核心是三层结构：容器 → 图片 → 半透伪元素。伪元素“看到”的背景就是它下面的图片，backdrop-filter 才能模糊那块区域。
div.img-container {
position: relative;
display: inline-block;
}
div.img-container img {
display: block;
width: 100%;
height: auto;
}
div.img-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); /* Safari 兼容 */
}-
background-color的 alpha 值不能为 0，否则伪元素不可见，也就没“遮罩感” -
-webkit-backdrop-filter必须写，Safari 15.4+ 才支持无前缀版本 - 不要给
img设z-index，否则可能破坏层叠顺序；靠默认文档流和伪元素的position: absolute就够了
blur 值过大导致边缘发虚或性能卡顿
超过 12px 的 blur() 值在中低端设备上容易触发重绘抖动，尤其滚动或悬停时。不是越糊越高级，而是要平衡质感与响应速度。
- 推荐值域：
blur(4px)～blur(10px)，多数场景blur(6px)最自然 - 避免在
:hover中动态改变backdrop-filter值，会引起 layout thrashing；如需交互，改用opacity或transform - 如果图片本身分辨率低，大 blur 会让噪点扩散更明显，建议先确保原图清晰、尺寸充足
替代方案：当 backdrop-filter 不可用时怎么模拟
Firefox 禁用或旧版 Safari 下，backdrop-filter 彻底失效，这时不能留白，得降级。
立即学习“前端免费学习笔记（深入）”；
- 用
filter: blur(2px)直接模糊图片本身（注意：这是前景模糊，不是毛玻璃，质感不同） - 或叠加一层高斯模糊后的同图背景（需提前生成一张
blur(10px)的 base64 图作为background-image） - CSS @supports 可检测：
@supports (backdrop-filter: blur(1px)) { ... }，把降级样式写在 else 块里 - 别依赖 JS 检测，因为渲染时机难控；CSS 原生支持检测更可靠
毛玻璃遮罩真正的难点不在写法，而在控制模糊区域的精确范围——伪元素一旦超出图片边界，就会模糊到空白背景，露出难看的灰边。所以务必确认容器尺寸紧贴图片，且无 padding/margin 干扰。
