.container-fluid加全屏背景图需设min-height:100vh、px-0 py-0清内边距、background-size:cover，并确保路径正确、避免类名冲突、文字区用半透或虚化提升可读性。
container-fluid 怎么加全屏背景图才真正铺满
直接给 .container-fluid 加 background-image 通常会失败——它本身只是个“100% 宽度”的容器，高度默认由内容撑开，不是全屏。你看到的“没铺满”，其实是高度不够，图片只显示在内容区域里。
- 必须配合
min-height: 100vh或height: 100vh强制拉高容器，vh是关键，不是% - 别依赖父级
body或html的高度，它们默认不占满视口，要显式设置：html, body { height: 100%; }（但不如直接用vh可靠） -
.container-fluid内有 padding，默认是0.5rem，会导致背景边缘留白，加px-0 py-0清掉
background-size: cover 和 contain 的实际区别
设了背景图却变形或切掉关键内容？大概率是 background-size 选错了。这不是审美偏好，是响应式下图像行为的根本差异。
-
cover：等比缩放填满整个容器，**可能裁剪边缘**——适合大图做氛围背景，比如风景、渐变纹理 -
contain：等比缩放完整显示整张图，**四周可能留白**——适合 Logo、图标类小图，或需保留全部信息的场景 - 全屏背景几乎都该用
cover；如果用了cover还被裁得厉害，说明图片宽高比和屏幕差距太大，得换图或加background-position微调中心点（如center top）
为什么 background-image 在某些设备上不显示
不是代码写错，而是路径、加载时机或 CSS 优先级在作怪。尤其在 Bootstrap 5+ 项目中，常见于构建后路径失效或类名冲突。
- 路径写相对路径时，CSS 文件里的
url(../img/bg.jpg)是相对于 CSS 文件位置，不是 HTML——检查浏览器开发者工具 Network 标签页，看图是否 404 - Bootstrap 的
.bg-*类（如bg-primary）会覆盖自定义背景，因为它的background-color声明更具体；要么删掉这些类，要么用!important（不推荐），或提高选择器权重（如加.my-bg并单独写规则） - 移动端 Safari 对
background-attachment: fixed支持差，若用了视差效果，建议降级为scroll或用 JS 替代
如何让文字在背景图上清晰可读
背景图再酷，文字糊成一片就白搭。这不是加个 text-white 就能解决的事，对比度和视觉层次必须主动控制。
- 别只靠 Bootstrap 的
text-white或text-dark——深图配白字、浅图配黑字，但中间灰调图会让两者都难读 - 用半透背景块包裹文字：
div加bg-black bg-opacity-30 p-4 rounded，既保对比又不遮图 - CSS 里加
backdrop-filter: blur(2px)（注意兼容性，Safari 需-webkit-前缀），能让文字区域背景虚化，进一步提升可读性
全屏背景图真正的难点不在“怎么加”，而在“怎么稳”：路径不能断、尺寸不能崩、文字不能糊、移动端不能闪。每一步都得在真实设备上过一遍，光看桌面 Chrome 是不够的。
