零基础HTML图片模糊滤镜效果编写代码-html教程-PHP中文网

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

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

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

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

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

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

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

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

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

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

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

<picture></picture> 里每个 <source></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>}