CSS背景图在高分屏手机上模糊

在前端开发内容学习中，为什么CSS背景图在高分屏手机上模糊是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

根本原因是图源未匹配设备像素比（DPR），须同时使用@2x/@3x图、复合媒体查询（-webkit-min-device-pixel-ratio与min-resolution并存）及显式background-size（如750px auto），三者缺一不可。

因为图源分辨率没匹配设备像素比（DPR），浏览器被迫对1x图做插值拉伸——这不是background-size写得不对，是根本没换对图。

为什么 background-size: cover 还是糊

cover只控制缩放逻辑，不改变图源物理像素数量。iPhone 14（DPR=3）上，一张100×100px的@1x.png会被拉伸成300×300物理像素渲染，插值算法填充中间像素，结果就是毛边、发虚、文字边缘糊成一片。

• 开发时Chrome模拟器看着清楚，真机Safari一打开就糊：模拟器DPR常固定为2，真机DPR随机型跳变（iPhone 15 Pro Max是3，部分安卓是2.75）
• 即使写了background-size: 750px auto，只要图还是bg.jpg，照样糊
• background-size: 100% 100%在非矢量图上等于主动失真，慎用

image-set() 为什么没生效

不是写法错，是浏览器压根没识别。Firefox至今（v128）完全不支持image-set()；安卓WebView多数只认-webkit-image-set()，且要求路径绝对、单位必须是dppx或带x后缀。

• DevTools里background-image: image-set(...)被整行划掉 → 浏览器不支持，直接跳过整条声明
• Console报Failed to parse value for 'background-image' → 单位写错，比如用了2而不是2x
• 只看到@1x.png，@2x.png根本没发请求 → -webkit-版本没写在最前面，Safari 16.4+可能跳过整条规则

media query 必须同时写两套条件

只靠@media (min-resolution: 2dppx)会漏掉iOS 9–12的Safari；只写@media (-webkit-min-device-pixel-ratio: 2)在新版Chrome/Firefox/Edge中可能失效。

• 必须用逗号分隔的复合条件：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)
• 1x规则必须放在最前面作为fallback，否则某些旧浏览器会直接忽略后续所有media query
• 换了@2x.jpg但没同步写background-size: 750px auto → 高分辨率图仍被二次缩放，锐度反而下降

构建和部署环节最容易卡住

写了media query、准备了@2x图，上线后还是糊——问题常出在工具链或服务器配置上。

• Vite/webpack默认过滤带@的文件名（误判为PostCSS语法），需在vite.config.js里配assetsInclude
• 某些CDN或Nginx配置禁止@符号，导致[email protected]返回404
• 路径层级、扩展名必须完全一致，仅后缀不同；引号类型（单/双）三行声明必须统一

真正复杂的点在于：DPR是运行时变量，而CSS媒体查询和image-set()都是静态解析。如果你要动态切换主题+适配DPR+Canvas重绘，光靠CSS兜底不够，必须JS介入读取window.devicePixelRatio并重设缓冲区。