HTML5中body的background和bgcolor属性已彻底废弃，必须改用CSS的background-image和background-color设置；直接使用将被浏览器忽略，且无法通过!important或路径调整修复。
background-image 不是 HTML 标签，而是 CSS 属性；HTML 里没有“背景图标签”这种东西——用 <body background="..."> 是过时且已废弃的写法，现代浏览器可能不支持或行为异常。
为什么不能用 background 属性写在 HTML 标签里
早期 HTML 4 允许在 <body> 上直接写 background="bg.jpg"，但这个属性在 HTML5 中已被移除。它无法控制平铺、定位、缩放，也不支持响应式场景，更关键的是：
- 路径解析规则混乱（相对路径基于 HTML 文件，而非 CSS）
- 无法与
background-color安全叠加（出错时 fallback 行为不可控） - 所有现代构建工具（Vite、Webpack）和 Linter（ESLint + stylelint）会直接报错
background-image 必须配合哪些 CSS 属性才可用
单独写 background-image: url(...) 很可能看不到效果，因为默认会平铺、从左上角开始、不缩放。常见组合缺一不可：
-
background-repeat: no-repeat—— 防止小图无限重复“打格子” -
background-position: center—— 避免图偏左上角被裁切 -
background-size: cover或contain—— 否则大图溢出、小图留白 -
background-color（可选但推荐）—— 图片加载失败时兜底，避免白屏
示例：
body {<br> background-image: url("bg.jpg");<br> background-repeat: no-repeat;<br> background-position: center;<br> background-size: cover;<br> background-color: #f5f5f5;<br>}
立即学习“前端免费学习笔记（深入）”；
背景图层级（z-index）不起作用？先看定位
z-index 对背景图本身无效——背景图永远在元素内容之下、且无法被提升。如果你发现背景图被其他元素盖住，问题通常出在：
- 目标元素没设
position: relative（或absolute/fixed），z-index直接失效 - 父容器用了
overflow: hidden，把背景图裁掉了 - 误以为
background-attachment: fixed能提层——它只影响滚动行为，不改变堆叠顺序 - 多个同级元素都设了背景图，但 DOM 顺序靠后（HTML 中写在后面）的元素自然盖住前面的
真正要控制“谁在上谁在下”，得靠元素本身的 z-index + 定位，而不是动背景图。
