全屏404页面需三要素：background-size: cover、background-position: center center、重置body margin与min-height: 100vh；文字用flex居中；必须配置服务器返回真实404状态码。
全屏背景图的404页面必须用 background-size: cover
不加这句，图片会被拉伸、裁剪错位或留白——尤其在移动端。浏览器默认把背景图平铺（background-repeat: repeat），而404页需要一张图撑满整个视口，且保持比例。
关键不是“设了 background-image 就完事”，而是三件套缺一不可：background-size: cover、background-position: center center、background-attachment: fixed（可选，但滚动时更稳）。
注意：如果图太小（比如 800×600），cover 会放大导致模糊；建议用 ≥1920×1080 的图，或提供 @media 媒体查询降级。
HTML 结构要避免 body 默认 margin 和滚动条干扰
body 默认有 8px 外边距，且可能触发垂直滚动条（哪怕内容只有一行），导致背景图右侧被遮挡或出现意外空白。
必须重置：
body {
margin: 0;
min-height: 100vh;
background: url('404-bg.jpg') no-repeat center center;
background-size: cover;
}
这里用 min-height: 100vh 而非 height: 100vh，防止内容超长时背景截断；no-repeat 是显式声明，比依赖默认值更可靠。
文字居中不能只靠 text-align: center
水平居中只是基础，404 页面需要真·垂直+水平居中。常见错误是只给 div 加 text-align: center，结果文字贴顶。
推荐用 Flex 布局（兼容性到 IE10+）：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
如果必须兼容 IE9 及以下，改用绝对定位 + transform: translate(-50%, -50%)，但需额外加 position: relative 到 body，且文字容器要设 position: absolute。
404 页面必须手动设置状态码，否则不是真 404
纯 HTML 静态页放在服务器上，默认返回 200 状态码，搜索引擎会当成有效页面收录——这违背 404 语义。
解决方式取决于部署环境：
- Apache：在
.htaccess中加ErrorDocument 404 /404.html，并确保服务器配置允许覆盖 - Nginx：在 server 块里写
error_page 404 /404.html，同时确认404.html在 root 路径下 - Vercel/Netlify：在项目根目录放
404.html，平台自动识别并返回 404 状态码（无需额外配置） - 自己用 Node.js（如 Express）：路由末尾加
res.status(404).sendFile(...)
验证是否生效：打开开发者工具 → Network 标签 → 刷新 404 页面 → 查看响应头里的 Status: 404 Not Found。没这个，再好看的背景图也只是个“假 404”。
最常被忽略的是状态码和图片尺寸适配——背景图看着正常，不代表它在 iPad Pro 或折叠屏上不崩；页面渲染出来是 404 样式，不代表 HTTP 状态码是真的。这两点不验，等于白搭。
