最常见原因是容器“有背景但没高度”：空div或未设height/min-height的元素会塌陷为0px，导致背景不可见；应加border验证、用min-height:100vh替代height:100%，并确保父级高度传递。
直接换背景图不能只改 background-image 路径，必须同步处理容器尺寸、缩放行为、断点适配和加载容错——否则在手机上空白、在平板上拉伸、在高 DPR 屏上模糊。
为什么 background-image 换了但页面没显示
最常见原因是容器“有背景但没高度”：浏览器渲染背景的前提是元素有可计算的高度。空 <div> 或未设 <code>height/min-height 的 会塌陷为 0px，背景不可见。
- 给目标元素加临时
border: 1px solid red，看是否渲染出框——没框就是高度问题 - 避免只写
html, body { height: 100% }：需确保所有父级（包括）都有显式高度传递 - 推荐用
min-height: 100vh，而非固定像素值，保证首屏始终撑满 - 本地开发时路径写
url('./assets/bg.jpg')，别用url('c:\xxx.jpg')——浏览器会静默失败或报net::ERR_FILE_NOT_FOUND
cover 和 contain 怎么选才不裁脸也不留白
background-size: cover 和 background-size: contain 行为差异极大，选错会导致关键内容被切掉或视觉松散。
-
cover：等比缩放至完全覆盖容器，**必然裁剪边缘**；适合横幅、氛围图，但窄高容器（如手机竖屏）易裁掉人物头部——此时应配合background-position: top或媒体查询微调 -
contain：等比缩放至完整可见，**必然留白**；适合 Logo、图标、信息图等需保留全部细节的图像 - 慎用
100% 100%：强制拉伸，失真严重，仅适用于明确需要像素化/复古效果的场景 - 无论选哪个，都必须配
background-position: center（或center center）才能视觉居中
怎么让不同设备加载不同背景图
CSS 本身不支持像 <picture></picture> 那样的资源选择逻辑，只能靠媒体查询手动切换 background-image URL——但浏览器会**预加载所有断点下的图片**，所以路径必须精简、尺寸必须匹配设备。
立即学习“前端免费学习笔记（深入）”；
- 移动端用小图：
@media (max-width: 768px) { .hero { background-image: url('./assets/bg-mobile.jpg'); } } - 桌面端用高清图：
@media (min-width: 769px) { .hero { background-image: url('./assets/bg-desktop.jpg'); } } - 不要指望 CSS 自动 fallback：WebP/AVIF 图片无法优雅降级，服务端根据
Accept头返回更可靠 - 若需按 DPR 加载（如 @2x），必须用 JavaScript 检测
window.devicePixelRatio后动态插入 class，再由 CSS 控制
background-attachment: fixed 在哪会失效
background-attachment: fixed 在 iOS Safari 和部分安卓 WebView 中表现异常：滚动卡顿、背景错位、甚至完全不固定。它依赖合成层，而移动端渲染管线对此支持不一。
- 移动端建议默认关闭：
@media (max-width: 768px) { .hero { background-attachment: scroll; } } - 若坚持使用，务必加
will-change: transform或transform: translateZ(0)触发硬件加速 - fixed 背景 +
cover+ 小屏 = 高概率裁剪+错位，测试时一定要真机验证，不能只看 Chrome DevTools 模拟
真正麻烦的不是写几行 CSS，而是每张背景图都要单独考虑构图焦点、裁剪容忍度、文件体积和 DPR 适配——尤其当设计稿里“同一张图适配所有设备”只是个理想状态时。
