应使用 background-image css 属性而非过时的 body background 属性；正确写法包括指定 url、background-size、background-repeat 和 background-position，避免简写导致意外重置，并通过开发者工具调试路径与加载问题。
直接用 background-image CSS 属性，别碰 这种过时写法，它在 HTML5 里已被废弃，现代浏览器可能不渲染或行为异常。
怎么写对：CSS 中设置 background-image 的基本写法
背景图必须通过 CSS 控制，推荐写在 <style></style> 标签里或外部样式表中。关键不是“加图”，而是“控制图怎么铺、怎么定位、要不要重复”：
- 路径写对：相对路径以 HTML 文件为基准，比如图片在同级
img/bg.jpg，就写url("img/bg.jpg")；绝对路径从网站根目录算起，如url("/assets/bg.jpg") - 必须配
background-size和background-repeat，否则默认平铺且不缩放，大图只显示左上角一小块 - 建议加上
background-attachment: fixed如果想实现视差效果，但注意移动端兼容性差，滚动可能卡顿
body {
background-image: url("bg.jpg");
background-size: cover; /* 拉伸填满，可能裁剪 */
background-repeat: no-repeat;
background-position: center;
}为什么 background 简写容易出错
用 background 一次性写多个值看似方便，但会**重置所有未显式声明的子属性**，比如漏写 background-color，就会把默认的白色变成透明，底下内容若没设背景色可能看不清。
- 常见错误：
background: url("bg.jpg") no-repeat;—— 这会把background-size、background-position全设回默认值（auto），图很可能不居中也不覆盖 - 更安全的做法是拆开写，或者确保简写中包含全部需要的值：
background: url("bg.jpg") no-repeat center/cover; -
center/cover是background-position/background-size的简写组合，斜杠不能漏，顺序也不能反
图片加载失败或路径不对时，页面一片空白怎么办
浏览器不会报错，只会安静地当背景不存在——这是最常被忽略的调试盲点。
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具（F12），在 Elements 面板里选中
，看 Styles 面板里background-image是否显示为none或带删除线 - 点击 URL 链接（如果可点击），看是否 404；不行就右键「在新标签页打开图像」，确认路径和大小写（Linux 服务器区分大小写）
- 临时加个
background-color: #eee;，如果看到灰色底，说明图没加载成功；如果还是白的，可能是 CSS 没生效或选择器权重不够 - 避免用中文路径或空格，浏览器解析容易出问题，统一用英文下划线命名
真正麻烦的不是加图，而是图在不同屏幕尺寸下怎么保持可用——cover 裁剪、contain 留白、100% 100% 拉伸变形，每种都有适用场景，得根据设计意图手动选，没有万能解。
