HTML图片模糊效果怎么添加_HTML图片模糊效果添加CSS

使用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 让模糊变化更平滑，提升用户体验。

Alkaid.art

专门为Phtoshop打造的AIGC绘画插件

153

查看详情

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() 就能应付大部分图片模糊需求，不复杂但容易忽略细节。根据实际场景选择静态模糊、动态交互还是背景模糊处理方式。

以上就是HTML图片模糊效果怎么添加_HTML图片模糊效果添加CSS的详细内容，更多请关注php中文网其它相关文章！