根本原因是1x位图被强制拉伸插值渲染，须同时提供@2x/@3x图、用复合媒体查询（-webkit-min-device-pixel-ratio与min-resolution并存）触发、显式声明background-size（如750px auto），三者缺一不可；再配合image-rendering: crisp-edges禁用插值，并验证构建路径与网络请求是否正常。
高分屏下Safari中CSS背景图发虚，根本原因是1x位图被强制拉伸插值渲染，而浏览器未加载对应2x/3x资源或未正确控制缩放逻辑——这不是图片质量差，是像素密度错配导致的失真。
确认是否真为位图模糊而非毛玻璃失效
先排除backdrop-filter干扰：打开DevTools → Elements → 检查该元素是否有backdrop-filter相关样式。若有，临时禁用它，再观察背景图是否仍模糊。若模糊消失，说明问题在毛玻璃层叠，而非背景图本身。
确保background-image声明未被其他CSS覆盖：在Styles面板中查看background-image行是否被划掉（strikethrough），若被划掉，往上追溯是否有!important或更高优先级规则覆盖了它。
用媒体查询精准匹配设备像素比
只写@media (min-resolution: 2dppx)会漏掉iOS 9–12的Safari；只写(-webkit-min-device-pixel-ratio: 2)则在新版Chrome/Firefox中可能失效。必须用逗号分隔的复合条件：
第一步：【基础图必须放在最前面作为默认fallback】，否则高DPR设备可能直接跳过所有规则：.banner { background-image: url("bg.jpg"); }
第二步：添加双条件媒体查询，覆盖2x屏：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {<br>
.banner { background-image: url("bg@2x.jpg"); }<br>
}
第三步：对3x屏单独声明（如iPhone Pro系列）：
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {<br>
.banner { background-image: url("bg@3x.jpg"); }<br>
}
注意：@2x/@3x文件名必须与1x图同路径、同扩展名，仅后缀不同；Nginx/Vite默认允许@符号，但某些CDN会过滤，上线前务必验证Network面板中bg@2x.jpg返回200。
显式设置background-size防止二次拉伸
换上@2x图后仍模糊？大概率是background-size没设或设为auto——浏览器会按容器尺寸再次缩放高清图，导致插值失真。
方法一：若背景图设计宽度为750px（常见移动端稿），写：background-size: 750px auto;
这样无论DPR多少，都按原始逻辑宽缩放，避免cover在不同DPR下裁剪点偏移。
方法二：若需铺满且保持等比，用：background-size: 100% 100%;
【仅限原图宽度≥1920px的超大图，普通位图慎用】，否则拉伸后必然糊。
方法三：图标类小图必须写死像素值，例如icon尺寸设计为24×24px，则：background-size: 24px 24px;
不写单位、不写auto、不写cover——这是最安全的写法。
构建环节验证路径是否真实存在
Vite/Webpack默认不扫描image-set()或媒体查询里的url()，但媒体查询中的url("bg@2x.jpg")同样需要被构建工具识别并复制进dist目录。若没配置，上线后就是404，浏览器fallback到1x图，高分屏照样糊。
验证方式：打开Network面板，刷新页面，搜索bg@2x.jpg，确认状态码为200且Preview中图像清晰。若无此请求或返回404，说明构建未包含该文件。
Webpack用户需检查url-loader或asset modules配置是否启用；Vite用户确认vite.config.ts中build.rollupOptions.plugins是否注入了处理@符号的插件（如@rollup/plugin-replace）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
