直接用 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) 作用于其上的半透明遮罩层——这样不会影响文字渲染质量，也更符合语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
