CSS媒体查询需为每个断点显式设置background-image及background-size、background-position、background-repeat等属性，确保路径一致并匹配Bootstrap断点值，但无法真正条件加载图片。
用 CSS 媒体查询配合 background-image 切换背景图
bootstrap 本身不提供“按屏幕尺寸切换背景图”的内置类，得靠 css 媒体查询手动控制 background-image。这不是 bootstrap 的缺陷，而是设计使然——背景图属于视觉层，响应式布局只管结构，不替你决定每张图该在多宽时出现。
常见错误是试图用 .d-none .d-md-block 控制多个 <img> 标签来“切换”，结果图片仍会下载、DOM 膨胀、语义混乱；或者只改 background-color 却忘了重置 background-image，导致小屏下还加载着大图。
- 每个断点写独立的媒体查询，显式设置
background-image: url(...)，并确保其他断点下该元素没有残留背景 - 推荐把所有背景图规则写在同一个选择器内（比如
.hero-section），避免样式分散难维护 - 注意路径一致性：如果用相对路径，确保所有
url()中的路径都相对于当前 CSS 文件位置
Bootstrap 4/5 断点值要和媒体查询对齐
Bootstrap 的预设断点不是魔法数字，它直接影响你媒体查询的临界值。比如 Bootstrap 5 的 md 是 ≥768px，那你的 @media (min-width: 768px) 才能和 .d-md-block 行为一致。错用成 767px 或 769px 就会出现“明明写了 md 类却没生效”的错觉。
实际项目中，建议直接抄 Bootstrap 官方断点表（或从 bootstrap/scss/_variables.scss 里复制），别凭记忆写：
-
@media (max-width: 575.98px)→ 对应xs -
@media (min-width: 576px)→sm -
@media (min-width: 768px)→md -
@media (min-width: 992px)→lg -
@media (min-width: 1200px)→xl
background-size 和 background-position 必须每段都重申
很多人只在基础样式里写一次 background-size: cover，以为媒体查询里会继承——但不会。CSS 媒体查询是完全独立的作用域，一旦进入新查询块，所有未声明的背景相关属性都会回退到浏览器默认值（比如 background-size: auto），结果就是小图被拉伸、大图被裁切一半、居中失效。
所以每次换图，都要把整套背景控制属性配齐：
- 必须重复写
background-size: cover（或contain，依需求） - 必须重复写
background-position: center center（单写center也行，但明确写两个更稳妥） - 必须写
background-repeat: no-repeat，否则高倍屏下可能意外平铺 - 如果图很重要，加
background-attachment: fixed要谨慎——iOS Safari 不支持，且滚动性能差
图片资源体积和加载时机容易被忽略
最隐蔽的问题不是代码写错，而是所有背景图都在页面加载时一并下载。哪怕你用媒体查询让小屏只显示 mobile-bg.jpg，桌面端的 desktop-bg.jpg 仍会发请求——除非你用 prefers-reduced-motion 或 JS 懒加载兜底。
目前纯 CSS 方案无法真正“条件加载”，只能靠策略缓解：
- 给不同尺寸图起名带后缀（如
bg-xs.jpg、bg-lg.jpg），方便后续用 Webpack 或 Vite 的 image 插件自动压缩 - 小屏图优先保证压缩率（
quality=60），桌面图可保留更高细节，但总大小别超 300KB - 若首屏背景图关键，考虑用
<picture>+<img>替代背景图，获得真正的按需加载和loading="eager"控制
真正在意加载性能时，CSS 背景图切换只是视觉补救，不是资源优化方案。
