用 background-image 实现图片占满视窗是标准解法，支持 cover/contain、center 对齐和 no-repeat，配合 flex 居中文字更稳定可靠，需注意加载失败降级、移动端兼容及 z-index 层级问题。
图片占满视窗用 background-image 而不是 <img alt="CSS布局如何使得一个大图片占满视窗同时文字浮在中央" >
直接塞 <img alt="CSS布局如何使得一个大图片占满视窗同时文字浮在中央" > 很难真正“撑满”且不拉伸变形，background-image 才是标准解法。它天然支持 cover 和 center 控制，浏览器渲染也更稳定。
常见错误是给 <img alt="CSS布局如何使得一个大图片占满视窗同时文字浮在中央" > 加 width: 100vw; height: 100vh;，结果图片被强行拉伸、模糊，或在移动端因滚动条宽度导致水平溢出。
- 用
body或全屏div做容器，设height: 100vh; margin: 0; - 背景图用
background-size: cover;（等比缩放填满）或contain;（完整显示，可能留白） - 必须加
background-position: center;，否则默认左上角对齐，文字会偏 - 记得设
background-repeat: no-repeat;，不然小图会平铺
文字居中靠 display: flex + justify-content/align-items
绝对定位 + transform: translate(-50%, -50%) 虽然能用，但依赖固定宽高、易受字体加载影响；Flex 是现代、语义清晰、响应式友好的选择。
典型坑：只写 justify-content: center; 忘了 align-items: center;，文字只水平居中，垂直还在顶部。
立即学习“前端免费学习笔记（深入）”；
- 容器需设
display: flex;、justify-content: center;、align-items: center; - 文字元素本身不用设宽高，但建议加
text-align: center;防止多行时左右不对齐 - 如果文字内容动态变化，Flex 自动适配；而绝对定位需额外监听 resize 或字体加载
background-attachment: fixed 会让文字“飘”起来？
加了这个属性，背景图会固定在视口，滚动时像视差效果——但文字是随页面滚动的，看起来就像浮在图上“不动”。这不是 bug，是预期行为；但如果想文字也随图一起“钉住”，就得把文字也放进同个固定背景容器里。
容易踩的坑：在移动端 Safari 上，fixed 背景常失效或触发闪烁，因为 iOS WebKit 对 background-attachment: fixed 支持不一致。
- 如需视差效果，优先用
position: sticky;或 JS 滚动监听，兼容性更好 - 若坚持用
fixed，务必加@supports (background-attachment: fixed)条件判断降级 - 文字层级要确保
z-index够高，避免被其他层遮挡（尤其有 sticky header 时）
图片加载失败时文字被盖住怎么办
背景图加载失败不会触发 onerror，也没有 fallback 机制，纯白背景+黑字就看不到了。这是最常被忽略的体验断点。
不能只靠 CSS，得结合 HTML 结构和轻量 JS 补位。
- 给容器设一个安全底色：
background-color: #222;（深灰比纯白更容错） - 用
<img alt="CSS布局如何使得一个大图片占满视窗同时文字浮在中央" >做后备：隐藏它，仅在背景图加载失败时显示（通过 JS 监听img.onerror后切换 class） - 字体颜色别硬写
color: white;，改用color: var(--text-on-dark, white);，方便主题切换
