image-rendering: pixelated 仅在图片被整数倍放大时生效，缩小场景下无效；正确用法是显式设置 width/height 为原始尺寸的整数倍，并确保图片已加载、未被隐藏或裁剪。
image-rendering: pixelated 只在图片被放大时生效，缩小场景下完全无效——这是规范定义的行为，不是 bug。如果你的像素图（比如 16×16）放进 32×32 容器里还模糊，那大概率是它根本没被放大，或者被缩小时误用了这个值。
为什么 pixelated 在表格/小图标里总不生效？
因为表格单元格、工具栏、状态栏里的图标几乎全是「缩小」使用：原始图 48×48，显示为 16×16 或 24×24。而 pixelated 明确只作用于放大（scale > 1.0），缩小直接退回到 auto（双线性插值），边缘发灰、颜色漂移是必然结果。
- 别用
max-width: 100%或transform: scale(0.5)控制尺寸——前者触发响应式缩放但不保证整数倍，后者绕过image-rendering控制 - 确保 HTML 中显式写
width和height，且是原始尺寸的整数倍（如 48→24 是 ×0.5，但浏览器仍按“缩小”处理，pixelated不触发） - 检查是否被 Tailwind、Normalize.css 等注入了
image-rendering: smooth，用!important或更高优先级选择器覆盖
pixelated 的正确使用场景和写法
它只适合明确要「马赛克感」的整数倍放大，比如像素风游戏截图、复古 UI 动效、或调试用的放大预览。其他情况请换 crisp-edges。
- 必须用
width/heightCSS 属性放大（如原始 32×32 → 设为width: 96px; height: 96px），不能靠transform: scale(3) - 现代浏览器（Chrome 122+、Firefox 78+、Safari 15.4+）支持原生
pixelated；旧版 Safari 需补image-rendering: -webkit-optimize-contrast，但效果略不同 - 不要混写：
image-rendering: crisp-edges; image-rendering: pixelated;—— 后者会被前者覆盖，且语义冲突 - 示例写法：
img.enlarged-pixel {<br> width: 128px;<br> height: 128px;<br> image-rendering: pixelated;<br> image-rendering: -webkit-optimize-contrast;<br>}
pixelated 对 <canvas></canvas> 完全无效
image-rendering 是 CSS 合成层属性，只影响 <img> 元素或 background-image 的最终光栅化输出。<canvas></canvas> 内部所有绘制（包括 ctx.drawImage()）走 JS 光栅管线，CSS 无法干预。
- 错误做法：给
<canvas width="32" height="32"></canvas>加image-rendering: pixelated，再用 CSS 拉伸到 128×128 - 正确做法：保持 canvas 尺寸为原始值（如 32×32），然后 JS 中设
ctx.imageSmoothingEnabled = false，再用ctx.scale(4, 4)+ctx.drawImage(img, 0, 0) - 如果 canvas 是用来动态渲染表格图标、状态标记等，
pixelated无论怎么加都白忙活
真正容易被忽略的点是：即使写了 pixelated，只要图片还没加载完成（img.onload 前）、或被 display: none 拦截、或容器有 border-radius + overflow: hidden 触发 subpixel 渲染，它就压根不会触发。别急着调样式，先确认它真被浏览器识别为「正在放大」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
