零基础HTML图片模糊滤镜效果编写代码

小婷同学_7263

发布时间：2026-09-09 14:16:35

912人浏览过

来源于php中文网

原创

用 filter: blur() 实现图片模糊最直接，关键在应用位置和数值（0.5px–3px为安全范围），需配合 overflow: hidden 或宽高约束防渲染异常，并注意移动端兼容性、性能影响及局部模糊替代方案。

零基础html图片模糊滤镜效果编写代码

图片模糊用 `filter: blur()` 最直接

零基础也能立刻生效，不用 JS，纯 CSS 就行。关键不是“怎么加”，而是“加在哪”和“加多少”。blur() 的单位是像素，值越小越轻微，0.5px 到 3px 是常用安全范围；超过 5px 容易糊成色块，且在低分辨率屏上可能渲染异常。

常见错误是直接给 <img> 标签加 filter，结果发现 hover 时模糊不平滑、或父容器裁剪后边缘发虚。原因在于 filter 会扩大元素渲染区域，必须配合 overflow: hidden 或明确宽高约束。

写法示例：

<img src="photo.jpg" style="filter: blur(1.2px); width: 300px; height: 200px; object-fit: cover;">

若要 hover 清晰 → 模糊，记得加 transition: filter 0.3s ease，否则切换生硬
移动端 Safari 对 blur() 支持较弱，低于 iOS 15.4 可能完全不生效，需 fallback（比如用半透明遮罩模拟“弱化感”）

`<picture>` + `blur()` 不是组合技，别混用

<picture> 是为响应式换图服务的，和滤镜无关。有人误以为在里面套 filter 能“对不同尺寸图分别模糊”，其实不行——filter 是作用于最终渲染的 DOM 元素，不是 source 节点。所有 <source> 和 <img> 都共享同一个样式层。

真正需要差异化处理时（比如小图不模糊、大图模糊），得靠媒体查询控制样式：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

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

@media (min-width: 768px) {<br>  .hero-img { filter: blur(0.8px); }<br>}

<picture> 里每个 <source> 的 media 属性只决定“选哪张图”，不影响滤镜逻辑
注意：如果用了 srcset，模糊效果仍统一应用在最终渲染的 <img> 上，和加载的是 1x 还是 2x 图无关

想局部模糊？`clip-path` 或伪元素更靠谱

原生 filter: blur() 是全图生效，没法只糊脸或只糊背景。强行用 canvas 或 SVG 做局部模糊对零基础太重，推荐两个轻量方案：

用 ::before 伪元素盖一层带模糊的渐变遮罩，再用 clip-path 切出要模糊的区域（比如圆形头像）：

.avatar { position: relative; }<br>.avatar::before {<br>  content: "";<br>  position: absolute;<br>  top: 0; left: 0; right: 0; bottom: 0;<br>  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.3), transparent 70%);<br>  filter: blur(8px);<br>  clip-path: circle(40px at 50% 50%);<br>}