必须提供物理尺寸翻倍的图并用 image-set() 或 @media 切换，仅 background-size 无法解决 Retina 模糊；因浏览器仍加载 1x 图后插值放大，导致细节不可逆丢失，且 image-rendering 对背景图无效。
直接结论：只靠 background-size 拉伸一张图，永远救不回 Retina 屏的模糊；必须提供物理尺寸翻倍的图，并用 image-set() 或 @media 主动切换。
为什么 background-size: cover 会让 Retina 图更糊
它不改变图片加载行为，只控制渲染方式。浏览器仍下载 1x 图（比如 400×300px），然后在 dpr=2 的设备上强行拉伸到 800×600 物理像素——本质是插值放大，细节丢失不可逆。
-
background-size: 100% 100%是最危险写法：强制非等比拉伸，dpr≠1 时失真加剧 -
background-size: cover或contain本身没问题，但前提是图源已匹配 dpr -
image-rendering对background-image完全无效，CSS 背景图不响应这个属性
image-set() 怎么写才真正生效
它不是“写了就清晰”，而是个有严格前提的语法糖：浏览器支持、路径真实存在、fallback 顺序正确、图尺寸真实翻倍。
- 必须显式写 fallback：
background-image: url("bg.png"); background-image: image-set("bg.png" 1x, "bg@2x.png" 2x);—— 后者覆盖前者，顺序反了就失效 -
bg@2x.png物理尺寸必须是bg.png的 2 倍（如 800×600 → 1600×1200），不能靠 PS 放大“假装”高清 - 必须设
background-size: 400px 300px（按设计稿逻辑尺寸），否则 2x 图会以原像素渲染，撑爆容器 - Vite/Webpack 默认不处理
image-set()里的路径，"bg@2x.png"得真出现在dist/目录下，否则 404 后不会降级，而是空白
@media 查询才是兼容性兜底刚需
image-set() 在 Firefox、旧版 Safari、安卓 WebView 中大概率静默失效。媒体查询是唯一能稳定覆盖主流环境的方案。
立即学习“前端免费学习笔记（深入）”；
- 用
min-resolution: 2dppx，别用192dpi或单独-webkit-min-device-pixel-ratio: 2—— 前者语义准确、不受系统缩放干扰，Chrome 29+/Firefox 16+/Safari 8+ 都支持 - 必须手动写两套规则，基础版放前面：
.hero { background-image: url("bg.png"); background-size: 400px 300px; } - 高清覆盖写后面：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .hero { background-image: url("bg@2x.png"); } } - 伪元素里用背景图时，别忘了
content: ""、display: block和显式width/height，否则没渲染区域
最容易被忽略的是：高清图换了，但 background-size 还按原图尺寸写，结果 2x 图被当 1x 渲染，反而糊得更彻底。所有高清方案都依赖“图够大 + 尺寸写对 + fallback 可靠”三者缺一不可。
