pixelated仅在width/height缩放时生效，放大清晰但缩小无效；transform、background-size等写法使其失效；Safari需用-webkit-optimize-contrast回退；它不提升分辨率，仅硬拉伸像素。
pixelated 确实能解决放大模糊，但只在放大时生效
给一张 64×64 的像素图设 width: 128px; height: 128px，再加 image-rendering: pixelated，就能看到清晰的块状像素——这是它最稳的使用场景。但如果你反过来缩到 32px，它就完全没反应，浏览器会退回到 auto（双线性插值），结果还是糊。这不是兼容性问题，是规范明确限定的行为。
必须配合原始尺寸缩放，不能用 transform
image-rendering 只对通过 width/height（属性或内联样式）触发的缩放起效。以下写法会让它彻底失效：
-
transform: scale(2)—— 插值发生在合成层，CSS 渲染属性无法干预 -
background-size: 128px 128px—— 该属性对background-image完全不生效 -
<img alt="如何在CSS中使用image-rendering优化像素图放大模糊问题" >被display: none或懒加载拦截后才应用样式 —— 渲染流程已跳过重绘
别漏掉 Safari 兼容，-webkit-optimize-contrast 是关键
Chrome/Firefox/Edge 支持 pixelated，但 Safari（尤其是 iOS 14 及更早）完全不认这个值。你得补一行：
img.pixel-art {
image-rendering: pixelated;
image-rendering: -webkit-optimize-contrast;
}
注意顺序：后者是 Safari fallback，不能省；也不能混写 crisp-edges，它语义不同，且会覆盖 pixelated。
立即学习“前端免费学习笔记（深入）”；
放大倍数过大时，清晰 ≠ 高质量
pixelated 不提升分辨率，只是把已有像素“硬拉伸”。一张 16×16 图放大到 256×256，你会得到巨大但稀疏的色块，边缘锐利，但信息量没变。如果需要兼顾可读性和尺寸，优先考虑 SVG 替代，或用工具预生成多级尺寸的 PNG。
