必须用原生CSS的background-image属性设置背景图Bootstrap的bg-*类仅设背景色会覆盖图片需同时指定background-size、background-position和background-repeat并确保容器有宽高、路径正确、无CORS问题。直接用 CSS 的 background-image别碰 Bootstrap 的 utility 类bootstrap 本身没有提供类似 bg-image 这样的内置类来设置背景图——所有试图用 bg-* 类比如 bg-primary叠加图片的方案最后都会失败或覆盖掉图片。真正生效的只有原生 css 的 background-image 属性。常见错误现象div 完全没显示图片、只显示背景色、图片拉伸变形、或者在响应式断点下突然消失。必须手动写 CSS哪怕只加一行 stylebackground-image: url(...)...Bootstrap 的 bg-* 类会设置 background-color和 background-image 冲突优先级低时会被覆盖路径写错尤其用相对路径时、图片 404、或 MIME 类型不被浏览器接受都会静默失败background-size 和 background-position 必须配齐只设 background-image 很大概率导致图片被裁切、重复平铺或缩成一个小角。这不是 Bootstrap 的锅是 CSS 背景默认行为。使用场景轮播区、登录页大图、卡片装饰图——这些地方都需要图片“撑满”或“居中覆盖”容器。background-size: cover等比缩放填满容器可能裁边最常用background-size: contain完整显示图片可能留白background-position: center center避免图片偏移尤其 cover 下必须加漏掉 background-repeat: no-repeat默认会平铺小图瞬间变满屏噪点响应式背景图要靠媒体查询不是 Bootstrap 断点类Bootstrap 的 hidden-sm 或 d-none d-md-block 对背景图无效——这些类控制的是元素显隐但 background-image 是样式层不会随元素隐藏而切换。 WisPaper 复旦大学研发的AI学术搜索工具5分钟内筛选1000篇论文