必须同时提供@2x/@3x图、用复合媒体查询（如@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)）命中、显式设置background-size（如750px auto），三者缺一不可，否则高dpr屏仍会模糊。
高分屏下CSS背景图模糊，不是图片质量差，而是1x图被强制拉伸插值渲染——必须同时提供@2x/@3x图、用复合媒体查询触发、显式声明background-size，三者缺一不可。
为什么只写 @media (min-resolution: 2dppx) 还是糊
这个写法在 iOS 9–12 的 Safari 中完全不生效，它只认 -webkit-min-device-pixel-ratio。新版 Chrome/Firefox 又逐渐弃用后者。单写任一条件都会漏设备。
- 必须用逗号分隔的复合条件：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) -
@2x规则必须放在默认url("bg.jpg")之后，否则高 DPR 设备可能跳过所有规则 - 别用
192dpi：单位换算易错，部分 Android 浏览器不识别
background-size 不设等于白搭
换了 @2x 图但没写 background-size，浏览器仍按容器尺寸缩放，高清图被二次插值，反而更糊。
- 若设计稿宽度是 750px，直接写
background-size: 750px auto，让图按原始比例缩放 - 避免
background-size: cover+ 高 DPR 混用：裁剪位置在不同 DPR 下偏移不可控 - 不用
100% 100%处理位图——这是非等比拉伸，失真比 cover 更严重
构建和部署时三个容易卡住的点
代码写对了，Network 面板里却始终只看到 bg.jpg 加载，bg@2x.jpg 根本没发请求，问题大概率不在 CSS。
- Vite/Webpack 默认可能过滤带
@的文件名（误判为 PostCSS 插件语法），要检查 dist 目录下是否存在bg@2x.jpg - 某些 CDN（如特定阿里云/腾讯云配置）会拦截含
@的路径，返回 404，需在 Network 面板确认状态码 -
image-set()在 Firefox v128 仍完全不支持，安卓 WebView 多数只认-webkit-image-set()，且要求路径加引号、单位必须是2x
真正起效的点永远在图源加载那一刻：DPR 匹配、路径可达、尺寸准确、background-size 不留空。其余都是锦上添花。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
