使用CSS filter: blur() 可轻松实现图片模糊效果，适用于现代浏览器；通过设置 blur 值控制模糊程度，结合 :hover 和 transition 可创建悬停交互效果；背景图模糊推荐用伪元素实现，避免影响内容；注意兼容性与性能，避免高值模糊大图。
想给HTML图片添加模糊效果，最常用的方法是使用CSS的 filter 属性配合 blur() 函数。这种方法简单高效，适用于大多数现代浏览器。
1. 使用 filter: blur() 添加图片模糊
直接在CSS中为图片设置 blur 值即可实现高斯模糊效果。数值越大，模糊程度越高。
示例代码：
.blur-image {
filter: blur(5px);
}
这段代码会让图片整体模糊5像素。适合用于背景图或悬停效果。
2. 鼠标悬停时显示模糊（交互效果）
可以结合:hover伪类，实现鼠标移上时图片变清晰或变模糊。
立即学习“前端免费学习笔记（深入）”；
常见用法：默认模糊，悬停清晰
.blur-hover {
filter: blur(8px);
transition: filter 0.4s ease;
}
.blur-hover:hover {
filter: blur(0);
}
transition 让模糊变化更平滑，提升用户体验。
3. 背景图片模糊处理技巧
如果模糊的是背景图，建议用容器包裹并设置 background-blur。
实现方式：
.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;
}
通过伪元素复制背景并模糊，不影响前景内容显示。
4. 兼容性与性能提示
filter 属性在IE浏览器不支持，Edge 12+ 和所有主流现代浏览器都可用。
移动端和PC端表现一致，但过度模糊可能影响加载性能 避免对大图长时间使用高值模糊（如 blur(20px)） 可搭配 opacity 或 transform 提升视觉层次
基本上就这些。掌握 filter: blur() 就能应付大部分图片模糊需求，不复杂但容易忽略细节。根据实际场景选择静态模糊、动态交互还是背景模糊处理方式。
以上就是HTML图片模糊效果怎么添加_HTML图片模糊效果添加CSS的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1582176.html
微信扫一扫 
支付宝扫一扫 
