background-size: cover是裁剪生效的前提，它通过等比缩放使图片至少一边撑满容器并裁剪溢出部分；必须搭配background-position: center center、明确容器高度（如min-height: 100vh）及background-repeat: no-repeat才能正确实现全屏自适应裁剪。
background-size: cover 是裁剪生效的前提
不设 background-size: cover，就谈不上“裁剪”——它才是触发浏览器等比缩放+溢出裁剪的开关。只写 background-image 或误用 background-size: 100% 100%，图片会强行拉伸变形；用 contain 则必然留白，不满足裁剪需求。
关键点在于：cover 的裁剪锚点默认是左上角，所以必须搭配 background-position: center center，否则人脸、Logo 等主体内容大概率被切掉。如果原始图宽高比和屏幕差距极大（比如超宽横幅图在手机竖屏上），上下裁得多是正常行为，不是 bug。
-
background-size: cover和background-position: center center必须成对出现 - 避免在同一个元素上混用
bg-dark等 Bootstrap 背景色类，它们会覆盖background-image - 移动端慎用
background-attachment: fixed，iOS Safari 存在已知渲染撕裂问题
容器必须有明确高度，否则背景根本不会渲染
给 .container-fluid 或 .row 直接加背景图，结果只在文字周围显示、左右留白？根本原因是这些类本身不设高度，完全依赖内容撑开。而裁剪需要一个“有边界的框”，没有高度，浏览器连铺图的区域都没有。
最稳解法是用视口单位：min-height: 100vh 比 height: 100vh 更安全，能防止内容超长时底部被截断。别把背景图直接加在 .container 上——它自带 max-width 和左右 padding，cover 会拉伸但视觉仍是“中间窄条”。
- 优先套一层自定义容器：
<div class="bg-cover"><div class="container-fluid"></div></div> - 在
.bg-cover中设置min-height: 100vh、background-image、background-size: cover、background-position: center center、background-repeat: no-repeat - 检查 computed styles，确认
min-height确实生效，而不是被父容器的overflow: hidden截断
background-position 写双值才真正居中
只写 background-position: center 是错的——它等价于 center top，图片会贴顶，不是垂直居中。必须写双值：background-position: center center 或 50% 50%，才能同时控制水平和垂直方向。
Bootstrap 5.3+ 提供了 bg-position-center 工具类，但低版本不支持。自己写 CSS 更可控：.bg-center { background-position: center center !important; }。注意加 !important 是因为 Bootstrap 的背景相关样式优先级可能更高。
- 不要指望
text-center或mx-auto对背景图起作用，它们只影响内容，不影响背景定位 - 如果用了
border-radius，记得加background-origin: border-box，否则圆角区域的背景会从 content-box 起算，视觉上像被切了一角 - 真机调试时发现“看起来被切掉”，优先查
background-image是否 404，而不是反复调background-position
移动端裁剪错位的真实原因往往不是参数问题
手机端背景图“看起来被切掉”，90% 不是 background-position 没调准，而是布局链断裂：body 漏了 min-height: 100vh、父容器意外带 overflow: hidden、或图片路径 404 后浏览器静默降级为纯色背景。
尤其要注意 iOS 上 background-attachment: fixed 在 15+ 版本有已知渲染 bug，配合 JS 滚动监听或 transform 时背景可能直接消失。真机调试时，先看 computed styles 里 background-image 是否生效、height 是否为 100vh、父级有没有隐式 overflow: hidden。
- 图片路径 404 后，浏览器不会报错，只会静默用背景色替代，你以为是裁切问题，实际图根本没加载出来
- 如果用了
object-fit做图片裁剪（非背景图），记得容器必须有明确宽高，且要加overflow-hidden才能生效 - 所有裁剪效果都依赖“容器有边界”，这个边界由显式高度 + overflow 行为共同定义，缺一不可
