直接用 img { filter: blur(4px); } 设置图片初始模糊度，单位 px 不可省略；需防 overflow 截断模糊边缘，可用 transition 实现渐变清晰，背景模糊推荐 backdrop-filter 而非 filter。

直接在 CSS 中给 img 元素设置 filter: blur(Xpx) 即可控制初始模糊度，X 是你想要的像素值，单位必须是 px（不能省略）。

基础写法：固定初始模糊值

最常用的方式是用类名或标签选择器统一设置：

• 给所有图片加默认模糊：img { filter: blur(4px); }
• 只对特定图片生效：.bg-blur { filter: blur(8px); }，再在 HTML 中写 <img src="..." class="bg-blur">
• 兼容旧版 Safari 需补前缀：-webkit-filter: blur(4px);（现代浏览器已基本无需，但留着更稳妥）

注意关键细节

几个容易出错但影响效果的地方：

• 单位不可省略：写 blur(5) 在部分 Safari 版本中无效，必须写 blur(5px)
• 父容器别裁掉模糊边缘：如果图片在 overflow: hidden 的容器里，且没预留额外空间，模糊光晕会被截断，看起来像没模糊——可加 padding 或设 margin: -10px 留出余量
• 避免被其他样式覆盖：检查是否被更高优先级的 CSS（比如内联样式、ID 选择器）重置了 filter，必要时用 !important 临时验证，但长期建议理清层叠顺序

配合过渡实现平滑入场

如果希望图片加载后从模糊渐变清晰，可以加 CSS 过渡：

立即学习“前端免费学习笔记（深入）”；

• 初始状态：img { filter: blur(6px); transition: filter 0.4s ease;
• 触发清晰化（例如加载完成或悬停）：img.loaded { filter: blur(0); }，用 JS 添加 loaded 类即可
• 也可用伪类做交互：img:hover { filter: blur(0); }

慎用 backdrop-filter 替代

如果是想让背景图模糊而前景文字清晰（如毛玻璃效果），不要对 img 本身设 filter，而应把图片作为容器背景，用 backdrop-filter: blur(10px) 作用于其上的半透明遮罩层——这样不会影响文字渲染质量，也更符合语义。