根本原因是小屏未设置 background-color 底色或被 background 简写覆盖，导致断点切换时背景透明而闪烁；应基础态写死 background-color，媒体查询内仅添加 background-image。
为什么 background-image 在媒体查询切换时会闪烁
根本原因是小屏基础样式没写，或写了但被 background 简写覆盖。浏览器在断点切换瞬间，background-image 还未生效、而 background-color 又丢失，就露出默认透明背景，造成“白闪”或“色块跳变”。
常见错误写法：.hero { background: linear-gradient(135deg, #0d6efd, #6f42c1); } —— 这直接清掉了所有 background 层级，小屏连纯色 fallback 都没有。
- 必须把小屏回退色写在媒体查询外，例如
.hero { background-color: #fff; } - 媒体查询里只改
background-image，不碰background或background-color - 避免用
background: linear-gradient(...)，它会重置整个 background 栈，包括 color、image、position 等
为什么 bg-gradient-* 工具类组合 d-md-block 会加剧闪烁
bg-gradient-primary 是全局生效的静态类，它在所有断点下都注入 background-image；d-md-block 只控制 display。两者叠加不是“渐变响应式”，而是“元素显隐响应式”——小屏时元素被隐藏，但一旦 resize 触发重绘，浏览器可能短暂渲染出未隐藏但无渐变的状态，尤其在 Safari 或低性能设备上更明显。
- 不要混用
bg-gradient-primary d-none d-md-block：这不是渐变开关，是整块内容开关 -
bg-gradient-primary必须搭配bg-*类（如bg-white）才可见，否则渐变底下是透明的 - 如果父容器有
background-color，子元素的渐变可能被盖住，导致你以为“没生效”，其实是被遮挡
如何验证是否真在闪烁，还是只是视觉错觉
打开浏览器开发者工具，选中目标元素，在 Styles 面板里手动勾选/取消 @media (min-width: 768px) 规则，观察 background-image 是否真的从 none 切换为 linear-gradient(...)，同时确认 background-color 始终存在。
- 检查 computed styles 中
background-image的值：小屏应为none，大屏应为有效渐变 - 确认
background-color在两个断点下都非 transparent，且未被其他规则（如bg-light）用!important覆盖掉 - 禁用 JavaScript 后测试：排除 JS 动态加类或 resize 监听器干扰
最稳的写法：分离 background-color 和 background-image
这是唯一能彻底避开闪烁的模式。核心就两条：基础态写死 background-color，断点内只追加 background-image，绝不使用 background 简写。
.hero-section {
background-color: #fff;
}
@media (min-width: 768px) {
.hero-section {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
}- 断点值必须严格用
768px，和 Bootstrap 5 的md定义一致 - 方向用角度（如
135deg），不用to right，旧版 Safari 对后者支持不稳定 - 如果用了深色模式，需额外加
@media (prefers-color-scheme: dark)分别定义渐变色值
真正容易被忽略的是：闪烁往往不是渐变本身的问题，而是你忘了给小屏留一个 solid 的 background-color 底色。只要这一行没写，任何媒体查询切换都会暴露透明背景。
