CSS Image Rendering
为什么图像渲染重要
CSS 的 image-rendering 属性控制浏览器如何缩放图像。正确使用这个属性可以避免缩放时的模糊或锯齿，保持图像的清晰度。
面试定位：这不是高频面试考点，但它展示了前端工程师对细节的关注。
image-rendering 的值
.rendering {
/* 浏览器自动选择（默认） */
image-rendering: auto;
/* 保持清晰度，适合像素艺术 */
image-rendering: crisp-edges;
image-rendering: pixelated; /* Safari 支持 */
/* 平滑缩放，适合照片 */
image-rendering: high-quality;
image-rendering: smooth;
/* 禁用抗锯齿 */
image-rendering: -webkit-optimize-contrast;
}
实战应用
/* 像素艺术游戏风格 */
.pixel-art {
image-rendering: pixelated;
image-rendering: -webkit-optimize-contrast;
}
/* 高质量照片 */
.photo {
image-rendering: high-quality;
}