图片放大发虚是GPU渲染亚像素导致，需用image-rendering: crisp-edges等指令强制锐化边缘；避免blur与scale同用，慎用will-change和object-fit，遮罩层设pointer-events:none透传事件。
网页图片用 transition 放大时边缘发虚、发毛，不是代码写错了，而是浏览器在 GPU 加速渲染下对亚像素的处理导致的。关键不在“怎么放大”，而在“怎么让放大过程不触发模糊渲染”。
给图片加清晰渲染指令
Chrome 和 Safari 在 transform: scale() 超过 1.0 后容易出现边缘锯齿或发虚，这是默认抗锯齿策略造成的。必须主动干预渲染方式：
- 对
<img alt="网页图片怎么使用 transition 放大时保持边缘清晰锐利" >元素添加：
image-rendering: -webkit-optimize-contrast;（WebKit 内核）
image-rendering: crisp-edges;（Firefox） - 这两个声明能强制浏览器优先保持边缘锐利，牺牲一点平滑度换清晰度，特别适合 logo、图标、UI 截图等硬边缘图像
- 注意：不要加
pixelated，它会让图片变成马赛克，只适用于故意复古风格
避免 blur() 和 scale() 同时触发重绘
很多人想“放大 + 模糊再变清”，但 filter: blur() 和 transform: scale() 一起动画会叠加图层重绘压力，加剧边缘闪烁和掉帧。
- 如果只要放大效果，就只用
transform: scale()配合transition: transform 0.3s ease-out - 如果必须加模糊过渡，把
blur()单独做一层动画，且起始值控制在blur(2px)–blur(4px)，别超过 6px - 切记：不要在同一个 hover 状态里同时改
scale和blur，否则 Safari 很可能跳变或首帧白屏
启用硬件加速但不滥用
硬件加速能提升动画流畅度，但加错地方反而引发渲染异常。
- 给图片加 will-change: transform;（不是
will-change: all），比translateZ(0)更精准、更轻量 - 确保图片容器有明确宽高，不要依赖
object-fit: cover动态缩放——这种计算会在每一帧重复，干扰清晰度保持 - 父容器加上 overflow: hidden，防止 scale 后边缘溢出造成裁剪模糊
遮罩层穿透问题要单独处理
如果放大区域覆盖了遮罩层（比如文字浮层、按钮），遮罩层会挡住图片的悬停事件，导致动画中断或失效。
- 遮罩层加 pointer-events: none，让它“透明”地透出鼠标事件
- 但注意：如果遮罩层本身需要点击（比如跳转链接），就不能设
none，得改用pointer-events: auto并把事件委托到图片容器上 - 必要时用
z-index显式分层，确保图片始终在渲染最上层
