最常见原因是路径404或容器高度为0；background-image路径应相对于HTML文件位置，非CSS文件，推荐使用根目录绝对路径如url("/assets/bg.jpg")，并确保容器有min-height:100vh。
background-image 写了但背景图不显示
最常见原因是路径 404 或容器高度为 0，浏览器不会报错，只会静默失败。打开开发者工具的 Network 标签页，过滤 Img，看图片请求是否返回 404；如果是，说明 url("xxx.jpg") 中的路径错了。
相对路径始终以 index.html 所在位置为基准，不是 CSS 或 JS 文件的位置。比如 HTML 在 /video/index.html，图片在 /assets/bg.jpg，就得写 url("/assets/bg.jpg")（推荐根目录绝对路径）。
- 给
body加min-height: 100vh，避免内容为空时高度塌陷 - 若仍不显示，尝试把背景设在
html元素上，更稳妥 - 别漏写
url()函数：写成background-image: assets/bg.jpg是无效的
404 页面中用 CSS 设置背景的典型写法
404 页面通常内容少、结构扁平，直接在 body 或外层 div.container 上设背景最直接。注意加兜底色和尺寸控制，否则移动端易留白或裁剪过度。
推荐组合写法：
立即学习“前端免费学习笔记（深入）”；
body {
background-image: url("/assets/404-bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #f0f0f0; /* 图片加载失败时的备用色 */
min-height: 100vh;
margin: 0;
}-
background-size: cover保证填满且不拉伸变形，但可能裁剪边缘 -
background-size: contain适合展示完整图标类图片，但四周可能留白 - 深色背景配浅色文字时，务必检查 WCAG 对比度（≥4.5:1），否则可读性差
JavaScript 动态设置 404 页面背景时的路径陷阱
用 element.style.backgroundImage = "url(xxx)" 设置时，路径解析规则没变——还是相对于 HTML 文件位置，不是 JS 文件位置。
例如文件结构为：
site/
├── 404.html
├── js/
│ └── main.js
└── images/
└── stars.png在 main.js 里写 document.body.style.backgroundImage = "url(images/stars.png)" 会失败，因为浏览器从 404.html 解析，实际去找的是 site/images/stars.png —— 这是对的；但如果误写成 js/images/stars.png 就 404。
- 统一用根目录路径最安全：
url("/images/stars.png") - 动态拼接时注意引号嵌套：
url("${imgPath}")中的${imgPath}必须是合法路径字符串 - 上线前务必在 Network 面板确认该图片请求状态码是 200
带动画或 Canvas 背景的 404 页面要注意什么
很多创意 404 页面用 SVG、Canvas 或 CSS 动画做星空、粒子、飘落效果。这类背景本质是覆盖在图片之上的图层，不是替代方案。
关键点：
- Canvas 背景必须等 DOM 加载完成再初始化，否则
getContext("2d")报错 - SVG 动画依赖
@keyframes，需确保 CSS 已加载且无同名规则冲突 - 所有动态背景都应有降级逻辑：检测
canvas.getContext是否存在，不支持时 fallback 到静态background-image - 移动端性能敏感，粒子数量建议 ≤50，动画帧率控制在 30fps 以内
真正容易被忽略的是：背景图 + Canvas 动画 + 文字层级之间 z-index 和 opacity 的叠加关系，稍不注意文字就发虚或看不见。动手前先在纯色背景上验证文字可读性。
