使用CSS filter: blur() 可轻松实现图片模糊效果，适用于现代浏览器；通过设置 blur 值控制模糊程度，结合 :hover 和 transition 可创建悬停交互效果；背景图模糊推荐用伪元素实现，避免影响内容；注意兼容性与性能，避免高值模糊大图。
想给HTML图片添加模糊效果，最常用的方法是使用CSS的 filter 属性配合 blur() 函数。这种方法简单高效，适用于大多数现代浏览器。
1. 使用 filter: blur() 添加图片模糊
直接在CSS中为图片设置 blur 值即可实现高斯模糊效果。数值越大，模糊程度越高。
示例代码：
<img src="example.jpg" class="blur-image">
<style>
.blur-image {
filter: blur(5px);
}
</style>
这段代码会让图片整体模糊5像素。适合用于背景图或悬停效果。
2. 鼠标悬停时显示模糊（交互效果）
可以结合:hover伪类，实现鼠标移上时图片变清晰或变模糊。
立即学习“前端免费学习笔记（深入）”；
常见用法：默认模糊，悬停清晰
<style>
.blur-hover {
filter: blur(8px);
transition: filter 0.4s ease;
}
.blur-hover:hover {
filter: blur(0);
}
</style>
transition 让模糊变化更平滑，提升用户体验。
3. 背景图片模糊处理技巧
如果模糊的是背景图，建议用容器包裹并设置 background-blur。
实现方式：
<div class="blur-bg"></div>
<style>
.blur-bg {
background-image: url('bg.jpg');
background-size: cover;
position: relative;
}
.blur-bg::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: inherit;
filter: blur(6px);
z-index: -1;
}
</style>
通过伪元素复制背景并模糊，不影响前景内容显示。
4. 兼容性与性能提示
filter 属性在IE浏览器不支持，Edge 12+ 和所有主流现代浏览器都可用。
- 移动端和PC端表现一致，但过度模糊可能影响加载性能
- 避免对大图长时间使用高值模糊（如 blur(20px)）
- 可搭配 opacity 或 transform 提升视觉层次
基本上就这些。掌握 filter: blur() 就能应付大部分图片模糊需求，不复杂但容易忽略细节。根据实际场景选择静态模糊、动态交互还是背景模糊处理方式。
