如何使用HTML设置图片模糊过渡效果-html教程-PHP中文网

img:hover没反应主因是img为替换元素，ios safari等移动端默认不派发:hover事件；未设display:block导致底部留白、悬停区域错位；transition未写在常态规则中；blur值未用px单位或写成none导致动画失效。

如何使用html设置图片模糊过渡效果

img:hover 为什么没反应？先确认是否踩了替换元素陷阱

直接给 <img> 写 :hover 在 iOS Safari 和多数安卓 WebView 上大概率失效——因为 <img> 是替换元素，移动端默认不派发 :hover 事件。更隐蔽的问题是：没设 display: block 会导致图片下方留白，实际悬停区域和视觉位置错位。

正确做法是用容器包裹：

把 <img> 套进一个 <div class="img-container"> <li> <code>:hover 写在容器上，比如 .img-container:hover img
<img> 必须加 display: block 消除行内空白
过渡声明（transition: filter 0.3s ease）必须写在常态规则里，不能只放在 :hover 中

filter: blur() 的值怎么设才不卡、不崩

模糊值不是越大越好看。blur(10px) 在低端机上容易掉帧，blur(none) 看似简洁，但无法参与 CSS 动画——浏览器会把它当作非可插值状态，导致整个 filter 链重置（比如同时用了 grayscale() 也会被清掉）。

HTML汇报生成器

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

下载

安全范围是 blur(2px) 到 blur(8px)，建议从 blur(4px) 起调
单位必须是 px，不能用 rem 或 %
想“模糊→清晰”，默认设 filter: blur(6px)，悬停时写 filter: blur(0)，别写 blur(none)
如果同时需要灰度或亮度，两边都要写全，比如默认 filter: blur(6px) grayscale(0.8)，悬停 filter: blur(0) grayscale(1)

transition 写在哪？漏掉这句就只有跳变

CSS 动画靠的是两个状态之间的插值计算，而 transition 告诉浏览器“哪些属性要动、怎么动”。它必须出现在基础选择器的常态规则中，而不是只塞进 :hover 里。

✅ 正确：.img-container img { filter: blur(4px); transition: filter 0.25s ease; }
❌ 错误：.img-container img:hover { filter: blur(0); transition: filter 0.25s ease; }（动画不会触发）
现代浏览器支持 filter 过渡，但旧版 Firefox（-webkit-filter 和 -webkit-transition
对大图或高分辨率屏，加 will-change: filter 强制走合成层，避免 Retina 屏糊成一片