推荐用 background-size: contain; + background-position: center; + background-repeat: no-repeat; 保404文字完整可见，深色图配::before半透黑遮罩提对比度；居中须用flex而非text-align；字体用clamp(2rem, 8vw, 6rem)响应式控制。
用 background-image 铺满全屏但不拉伸变形
直接写 background-image: url(...); background-size: cover; 很容易让图案被裁切或中心偏移，尤其在移动端。关键不是“铺满”，而是“可读区域不被遮挡”。404 文字必须始终清晰可见，所以推荐用 background-size: contain; + background-position: center;，再配合 background-repeat: no-repeat;。如果图是深色底+浅字，还要加一层半透黑遮罩（::before 伪元素）保文字对比度。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
用 text-align: center 居中但实际失效的常见原因
text-align: center 只对行内内容生效，对块级元素（比如 <div>）没用。真正让整个 <code>404 文字块居中的做法是：外层容器设 display: flex; + justify-content: center; + align-items: center;，再把文字包进一个 <div> 或 <code><h1></h1>。若坚持用 text-align，得确保父容器宽度为 100%，且文字容器是 inline 或 inline-block，否则会掉坑里。
字体大小响应式断点不能只靠 vw
font-size: 10vw; 在小屏上可能小到看不清，在大屏上又撑爆容器。更稳妥的是组合写法：font-size: clamp(2rem, 8vw, 6rem);。它保证最小 2rem、最大 6rem，中间随视口线性变化。别忘了给 <h1></h1> 加 line-height: 1; 防止上下留白挤压视觉重心，再用 letter-spacing: -0.05em; 让数字“404”更紧凑有力。
避免背景图抢戏的三个硬约束
- 背景图明度要低——用 CSS 滤镜压暗：
filter: brightness(0.4) contrast(0.8); - 图中不能有横向线条或强方向性元素，否则干扰“404”数字的视觉停顿点
- 加载失败时要有
background-color备用色（比如#f8f9fa），否则白屏几秒会显得页面崩了
