应将图片设为背景并用伪元素控制模糊范围，避免直接对使用filter: blur()；需注意单位、兼容性、性能及background-position同步。
用 filter: blur() 实现图片模糊，但别直接套在 <img alt="HTML怎么做图片模糊效果_html CSS图片模糊blur滤镜【含示例】" > 上
直接对 <img alt="HTML怎么做图片模糊效果_html CSS图片模糊blur滤镜【含示例】" > 元素加 filter: blur(5px) 确实能出模糊效果，但会模糊整个图片区域（包括边缘），且在缩放、滚动时容易出现渲染毛刺。更稳的做法是把图片设为背景，再用伪元素或包裹层控制模糊范围。
- 如果图片需要响应式裁剪或居中，用
background-image+background-size: cover更可控 -
blur()的参数单位必须是px或em，不能写blur(5)（缺单位会失效） - Chrome 和 Firefox 支持良好，但 Safari 15.4 之前对
filter在<img alt="HTML怎么做图片模糊效果_html CSS图片模糊blur滤镜【含示例】" >上的硬件加速不一致，偶发闪烁
想局部模糊？用 ::before 叠一层带 blur() 的遮罩
比如只让图片下半部分变模糊（常用于文字叠加场景），不能靠裁剪图片本身，而是用定位+伪元素盖住目标区域。
div.image-container {
position: relative;
background: url('photo.jpg') no-repeat center;
background-size: cover;
height: 400px;
}
div.image-container::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: inherit;
background-position: center bottom;
filter: blur(10px);
z-index: 1;
}
-
background: inherit让伪元素复用父容器背景图，避免重复请求 -
background-position: center bottom确保模糊区域对应图片底部内容，不是默认顶部 - 别忘了
z-index，否则伪元素可能被后续文字压在下面
blur() 值越大越卡？注意性能临界点
filter: blur(2px) 几乎无感，但超过 8px 后，中低端手机上可能出现掉帧，尤其页面还有其他动画时。
- Android Chrome 对 >6px 的
blur()会降级为 CPU 渲染，滚动时明显卡顿 - 用
will-change: filter提前提示浏览器优化，但仅对固定模糊值有效；动态修改时慎用，可能引发内存泄漏 - 真要大模糊（比如毛玻璃效果），优先考虑用 SVG 滤镜或 Canvas 预生成模糊图，而不是实时计算
兼容旧版 Edge 或 iOS 12？-webkit-filter 已不是必需
现在主流环境（Chrome 53+、Firefox 35+、Safari 9.1+、Edge 79+）都支持无前缀 filter。iOS 12.2+ 也已原生支持，无需补 -webkit-filter。
立即学习“前端免费学习笔记（深入）”；
- 只有仍需支持 iOS 10–12.1 或旧 Edge（≤18）时，才加
-webkit-filter: blur(3px) - 加前缀时必须和标准属性写在一起，且前缀版写在前面，否则会被覆盖
- 不要用
filter: url(#svg-blur)回退——SVG 滤镜在 Safari 上有严重兼容问题，且无法硬件加速
background-position 同步和模糊值的设备适配。比如在 Retina 屏上，blur(3px) 看起来可能比普通屏淡，得配合 device-pixel-ratio 媒体查询微调。 
