background-image 在高 DPI 屏上发虚主因是浏览器默认双线性插值缩放，解决关键在于匹配图片分辨率与容器尺寸、用 image-rendering 控制重采样方式，并在图像导出阶段启用锐化。
为什么 background-image 默认看起来发虚
HTML 中用 background-image 加载的图片，尤其在高 DPI 屏幕（如 MacBook Retina、Windows 4K 屏）上容易显得模糊，不是因为图片本身质量差，而是浏览器默认做了「抗锯齿缩放」和「双线性插值」——这是为了平滑缩放，但牺牲了边缘锐度。关键点在于：background-size 的取值、元素实际渲染尺寸与图片原始分辨率是否匹配，以及 CSS 缩放行为是否触发了降质重采样。
用 image-rendering 强制禁用插值
这是最直接干预渲染方式的 CSS 属性。现代浏览器支持三种常用值，效果差异明显：
-
image-rendering: crisp-edges：强制最近邻插值，适合像素风图或需要硬边的场景，但可能产生锯齿 -
image-rendering: pixelated：缩放时保持块状像素感，适用于响应式中「等比放大」且不想模糊的位图（如图标、小纹理） -
image-rendering: -webkit-optimize-contrast（仅 Safari 旧版）：曾用于提升文字/图标对比度，现已不推荐
更稳妥的写法是叠加前缀并 fallback：
body {
background-image: url("bg.jpg");
background-size: cover;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
确保 background-size 不隐式缩放失真
模糊常发生在你用了 cover 或 contain，而背景图原始宽高比与容器不一致，浏览器被迫拉伸+重采样。解决思路不是“锐化图片”，而是“减少重采样”：
立即学习“前端免费学习笔记（深入）”；
- 优先使用
background-size: 100% 100%配合固定宽高的容器，让图片按整数倍缩放（例如容器 800×600，图也是 800×600 或 1600×1200） - 避免用
cover处理文字可读区域（如 banner 文字区），改用background-position: center+ 明确尺寸裁剪 - 对响应式页面，提供
@media多倍图：background-image: url("bg@2x.jpg"); background-size: 50% 50%;（让 2x 图以一半尺寸渲染，物理像素不丢）
真正有效的“锐化”只在图像生成阶段
CSS 没有 filter: blur() 的反向操作（比如 sharpen()），filter: contrast(1.2) brightness(1.05) 看似提清晰，实则只是增强边缘对比，反而暴露压缩噪点。真正提升视觉清晰度的方式只有：
- 导出背景图时，在 Photoshop / Figma 中启用「输出为 Web 所用格式」并勾选「锐化（针对屏幕）」
- 用工具如
sips（macOS）或convert（ImageMagick）做无损重采样：sips -Z 1920 --padToHeightWidth 1920 1080 bg-src.png --out bg-cover.png
- WebP 格式比 JPEG 在同等体积下保留更多高频细节，建议用
cwebp -q 85 -sharp_yuv命令编码
浏览器里加再多 filter，也补不回原始信息丢失——清晰度瓶颈永远在图片源和渲染上下文，不在 CSS 层。
