最稳妥方案是用媒体查询配合两套background-image规则，或使用image-set()语法；需确保高清图物理尺寸≥容器css尺寸×设备像素比，伪元素须设content: ""和显式尺寸。
background-image怎么写才能在Retina屏显示清晰
直接用background-image: url(img@2x.png)不行——它只解决“有图”，没解决“该用哪张”。浏览器不会自动根据设备像素比（dpr）选图，得靠媒体查询或image-set()显式声明。
- 最稳妥是用
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)写两套规则，高分屏覆盖低分屏的background-image -
image-set()语法更简洁：background-image: image-set("bg.png" 1x, "bg@2x.png" 2x)，但注意 Safari 9+、Chrome 39+ 才支持，IE/Edge 旧版完全不认 - 别把
@2x图直接塞进普通background-image里——低分屏会多下一次大图，浪费带宽且可能模糊（因缩放）
background-size: cover在Retina下为什么会糊
不是cover本身有问题，而是你给的原始图尺寸不够。比如容器宽高是 400×300px，你只提供一张 400×300px 的图，在 dpr=2 的设备上，实际渲染需要 800×600 像素的画布——浏览器只能拉伸那张小图，结果就是模糊。
- 确保高清图物理尺寸 ≥ 容器 CSS 尺寸 × 当前设备 dpr（可通过
window.devicePixelRatio调试） - 用
background-size: 100% 100%替代cover时更危险：强制拉伸，糊得更明显 - 如果必须用
cover，建议按最大可能 dpr（比如 3x）准备图，再配合媒体查询降级
伪元素::before里用background-image适配Retina的坑
伪元素本身不触发重排，但它的背景图加载和渲染逻辑和普通元素一致——问题出在很多人忘了给伪元素设content: ""和显式尺寸，导致background-image根本没渲染区域。
- 必须写
content: ""，否则::before不生成框，背景图无效 - 必须设
display: block（或inline-block）+ 明确width/height，否则尺寸为 0 - 媒体查询里改伪元素的
background-image时，记得连同background-size一起调，否则高清图可能被裁错
用picture或img做背景图？别绕弯子
想用<picture></picture>或srcset实现响应式背景图，本质是误用——它们只对<img alt="CSS响应式设计中的Retina屏处理_高清背景图的适配" >生效。background-image不解析srcset，也不响应<source></source>的 media 属性。
立即学习“前端免费学习笔记（深入）”；
- 强行用
<img alt="CSS响应式设计中的Retina屏处理_高清背景图的适配" >盖在内容上模拟背景，要加position: absolute和z-index，但语义错、可访问性差、打印样式崩 - 真正需要复杂图片逻辑（如艺术指导 art direction）时，优先考虑 JS 动态换
style.backgroundImage，而不是硬套 HTML 图片方案 - CSS
image-set()仍是目前最接近“原生响应式背景图”的方案，只是兼容性要兜底
设备像素比不是固定值，iOS 某些场景会动态变化；别依赖window.devicePixelRatio初始化后就一劳永逸，需要监听resize甚至orientationchange做更新。
