背景图不显示的主因是路径错误、body默认margin导致高度塌陷、未配对设置background-repeat/background-size等属性；需用绝对路径或正确相对路径，设html/body{margin:0;height:100%}，background-size优先选cover并配合center定位。
直接用 background-image 设在 body 上，不加控制会平铺、留白、错位甚至完全不显示——真正起作用的是那几个必须配对的 CSS 属性，不是“设了图就完事”。
为什么 background-image 写了却看不到图片？
最常见原因是路径算错了，浏览器按 CSS 文件位置找图，不是按 HTML 文件位置。比如 CSS 在 /static/css/main.css，图在 /static/images/bg.jpg，就得写 url("../images/bg.jpg")；用绝对路径则必须以 / 开头：url("/images/bg.jpg")。
- 检查 DevTools 的 Network 面板，看请求是否返回 404 —— 别靠“没显示”瞎猜
- Linux 服务器区分大小写：
bg.JPG和bg.jpg是两个文件 - URL 中含空格或中文？必须编码，或直接重命名成
hero-bg.jpg - 图片本身尺寸太小（比如 320×240），
background-size: cover会放大模糊，但不会报错
body 背景填不满全屏？先查 height 链和 margin
body 默认有 margin: 8px，且没有显式高度，背景只画在内容区域，上下左右必然留白。关键不是“设 height: 100vh”，而是补全高度继承链。
- 必须同时写：
html, body { margin: 0; padding: 0; height: 100%; } - 更稳妥写法：
html { height: 100%; }+body { min-height: 100vh; }（避免内容超长时被截断） - 如果只写
body { height: 100vh; }，而html没设高，部分浏览器下仍可能塌陷 - 别漏掉
background-repeat: no-repeat—— 默认是repeat，小图会铺满成马赛克
cover 和 contain 怎么选？别用 100% 100%
background-size: 100% 100% 会强行拉伸，人像变形、文字糊成一片，尤其在 iPad 横屏或 21:9 显示器上几乎不可用。
立即学习“前端免费学习笔记（深入）”；
-
cover：等比缩放，直到宽或高至少一个填满容器，多余部分裁剪 —— 全屏 Banner 的标准选择 -
contain：等比缩放，确保整张图可见，四周必有留白 —— 适合 Logo 或信息图，不适合“满屏”需求 - 想居中焦点？配
background-position: center center；想突出右下角水印？写background-position: right bottom - 加
background-attachment: fixed可实现视差滚动，但 iOS Safari 支持不稳定，必要时加transform: translateZ(0)强制硬件加速
文字压在背景图上太难读？别调 opacity
给背景图加 opacity: 0.8 看似简单，实际会让整张图发灰、细节丢失，可读性反而更差。
- 推荐用伪元素叠一层半透渐变：
::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.1)); z-index: -1; } - 或者直接在文字容器上加
text-shadow: 0 2px 4px rgba(0,0,0,0.5)增强对比 - 移动端务必加
background-color占位，比如background: #2c3e50 url("bg.jpg") no-repeat center/cover;，防止图加载慢或失败时白屏
cover 不是万能解药，它裁哪、留哪，取决于原图构图和 background-position 的配合；同一张图在不同屏幕宽高比下，裁切区域可能完全不同——上线前一定在 iPhone SE、iPad Pro 和 3440×1440 超宽屏上实测。
