最稳妥方案是@media + background-image + background-size；image-set()因Firefox不支持、Chrome解析脆弱且无fallback易致背景空白，仅适合纯现代浏览器项目。
直接结论：用 @media + background-image + background-size 是目前最稳妥、兼容性最好、可控性最强的方案；image-set() 仅适合纯现代浏览器项目，且必须加 url() fallback 才不至于在 Firefox 或旧 Edge 中背景空白。
为什么不用 image-set() 直接上？
它看着简洁，但现实很骨感：image-set() 在 Firefox（截至 v128）完全不支持；Safari 16.4+ 才稳定；Chrome 虽支持，但只认 background-image，且整条声明一旦解析失败（比如某张图 404、路径含空格没加引号、漏写 1x），浏览器会直接丢弃整条规则，导致背景彻底消失——你根本看不到任何提示。
常见翻车点包括：
-
background-image: image-set("bg.png" 1x, "bg@2x.png" 2x)—— 漏了1x后的逗号或引号，旧 Safari 直接忽略 - Webpack/Vite 构建时，
image-set()里的~assets/别名不会被自动解析，路径 404 - CDN 自动给 URL 加
?v=xxx，但手动拼进image-set()会导致缓存失效或解析错误
@media 适配 background-image 怎么写才不出错？
核心是两件事：声明顺序 + background-size 必须同步调整。不能只换图不调尺寸，否则 @2x 图会以原尺寸渲染，视觉模糊加倍。
推荐写法（兼容 IE11 起）：
div.bg {
background-image: url("bg@1x.png");
background-size: cover;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
div.bg {
background-image: url("bg@2x.png");
background-size: cover; /* 必须重写，不能依赖继承 */
}
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
div.bg {
background-image: url("bg@3x.png");
}
}
注意点：
本地 Ollama 文生图工具。使用 x/z-image-turbo 模型生成图片，分辨率 1024x1024，每张图约耗时 90 秒。当用户说"生成图片"、"文生图"、"画一张图"、或提交中文提示词生成图像时使用。
- 不要混用
(min-resolution: 192dpi)和(-webkit-min-device-pixel-ratio: 2)在同一@media里——触发逻辑不一致，某些 Android 设备可能漏匹配 - 如果容器尺寸固定（如
width: 120px; height: 80px;），@2x 图应为240×160px，此时更推荐background-size: 120px 80px，比cover更精准 -
background-size: contain适合关键内容不能裁剪的场景（如 logo 背景），但小屏下容易留白；cover适合全屏大图，但需确认构图允许裁剪
全屏背景图还卡在滚动/拉伸上？
常见症状：背景图随页面滚动、边缘被拉伸变形、窄屏下顶部被切掉——问题往往不在图片本身，而在容器和定位设置。
关键配置缺一不可：
-
html, body { height: 100%; margin: 0; padding: 0; }—— 很多人漏掉html的高度声明，导致height: 100%失效 - 用
position: fixed而非absolute实现视口级固定，避免随内容滚动 -
background-attachment: fixed是冗余的，position: fixed的元素天然不随滚动 -
background-position: center center必须显式写，否则不同浏览器默认值不一致（有的居左上）
一句话模板：
body {
background: url("bg.jpg") no-repeat center center;
background-size: cover;
background-position: center center;
}
/* 若需固定在视口，改用以下方式替代 body 直接设背景 */
.full-bg {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: url("bg.jpg") no-repeat center center / cover;
z-index: -1;
}
真正容易被忽略的是：高清图适配不是“换张大图就完事”，而是要同时控制加载行为（避免小屏加载 3x 图）、渲染行为（background-size 类型选择）、以及容器行为（fixed 还是 scroll）。三者脱节，再高清的图也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
