用 background-size: cover 可使背景图等比缩放并完全覆盖容器，超出部分自动裁剪，需搭配 background-position: center center 防止关键内容被切，避免使用 100% 100% 或 contain。
用 background-size: cover 控制图片铺满全屏不形变
直接给 <body> 或全屏容器加背景图时，图片默认会平铺或拉伸变形。关键不是换图，而是用对 css 属性：background-size: cover 让图片等比缩放并完全覆盖容器，超出部分自动裁剪。
常见错误是只设 background-size: 100% 100% 或 contain —— 前者强制拉伸，后者留白。必须用 cover，且搭配 background-position: center center 确保焦点居中。
background-image: url("hero.jpg");background-size: cover;background-position: center center;background-repeat: no-repeat;-
background-attachment: fixed;（可选，实现视差效果，但移动端慎用）
Bootstrap 5 中避免 .container 或 .row 干扰背景显示
Bootstrap 的栅格系统自带 padding 和 max-width，如果你把背景图加在 <div class="container"> 上，实际只会覆盖内容区，不是真正“全屏”。正确做法是让背景图作用于一个撑满视口的独立容器，比如：
<div class="hero-bg d-flex align-items-center justify-content-center">
<div class="text-center text-white">
<h1>Welcome</h1>
</div>
</div>
然后单独写 CSS：
-
.hero-bg { height: 100vh; width: 100vw; }（不用min-height: 100vh，否则可能撑不满） - 确保该元素没有父级设置
overflow: hidden或transform，否则background-attachment: fixed会失效 - 如果用
.bg-dark等 Bootstrap 背景工具类，它们会覆盖自定义背景图，要避免混用
移动端适配：background-attachment: fixed 的兼容性坑
iOS Safari 和部分安卓浏览器不支持 fixed 背景定位，会导致滚动时背景图跟着动，失去“固定”效果。这不是 Bug，是性能策略。解决方案是条件性降级：
- 用
@supports (background-attachment: fixed)包裹固定背景样式 - 或者更稳妥：放弃
fixed，改用background-attachment: scroll+background-size: cover，视觉差异其实很小 - 若必须视差效果，改用 JS 库如
scrollama或纯 CSS 的transform: translateY()模拟，别硬扛fixed
图片加载失败时的 fallback 处理
网络慢或路径错，背景图空白会让页面“消失”。Bootstrap 不提供背景图 fallback 机制，得自己加：
- 用
background-color设一个与图片主色调接近的底色，比如#2c3e50 - 或叠加伪元素：
.hero-bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("fallback.jpg"); } - 注意：CSS 中多个
background值用逗号分隔，浏览器会从左到右尝试加载，第一个失败就用下一个
background-position 看似简单，但人像或关键元素常被切掉。建议在 CSS 里先用像素值微调，比如 background-position: center 20%;，而不是依赖默认居中。 
