CSS image-rendering 图像缩放算法
image-rendering属性：auto默认平滑、crisp-edges保持边缘清晰(pixel art像素画必备)、pixelated像素化放大、smooth高质量平滑、与Canvas imageSmoothingEnabled对比 · 难度：入门 · +10XP
CSS image-rendering —— 像素画放大不失真
把小图片放大时，浏览器默认会做平滑处理导致模糊。对于像素画（Pixel Art），我们要的是"马赛克放大"效果。
基本用法
.pixel-art {
image-rendering: pixelated; /* 像素画放大，锐利清晰 */
image-rendering: crisp-edges; /* 保持边缘锐利 */
}三个值
| 值 | 效果 |
|---|---|
| auto | 平滑放大（默认，照片适合） |
| pixelated | 像素化放大（像素画专用） |
| crisp-edges | 边缘锐利（二维码、截图） |
动手练习
- 基础练习：把一张100x100的像素画用CSS放大到400x400，分别测试auto和pixelated。
- 进阶应用：做一个二维码展示页面，确保二维码放大后边缘清晰。
- 项目实战：在网站中给所有小型装饰图标设置合适的image-rendering。