<p>Bootstrap 5 的 bg-gradient-* 类在导航栏上无效，因其仅设置 background-image，而 navbar 默认 background 简写声明会覆盖 background-image；需手动用 @media 控制 background-image 并配合 background-color 实现响应式渐变。</p>
Bootstrap 5 的 bg-gradient-* 类不支持断点响应式控制，导航栏（.navbar）上直接加 bg-gradient-primary d-md-block 不会实现“仅 md 断点启用渐变”，反而可能让小屏内容消失或渐变被静默覆盖。
为什么 bg-gradient-* 在导航栏上基本无效
导航栏的默认样式里有高优先级的 background 简写声明（如 background: #fff），它会直接清空 background-image —— 而所有 bg-gradient-* 类只设置 background-image，不碰 background-color。你在开发者工具里看到 background-image: none，不是你写错了，是 Bootstrap 自身 CSS 覆盖掉了。
- 删掉所有
bg-light、bg-dark、bg-white等背景类，它们是干扰源 -
bg-gradient-primary必须和bg-primary同时存在才生效，但两者都无断点逻辑 - 即使写了
d-none d-md-block，也只是隐藏整个 navbar，不是“关掉渐变”
用 @media + background-image 控制断点渐变
最可靠的方式是绕过工具类，手动写媒体查询，精确控制 background-image 的生效范围。注意：必须用 background-image，不是 background，否则会抹掉小屏回退的纯色背景。
- 基础态（小屏）先设
background-color: rgba(255, 255, 255, 0.85)（带透明度的纯色） - 在
@media (min-width: 768px)里覆盖background-image: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.1)) - 方向用
135deg比to right兼容性更好，尤其对旧版 Safari - 断点值必须是
768px，和 Bootstrap 5 的md完全一致，不能写767px或770px
滚动时渐变随断点动态变化的关键点
纯 CSS 无法监听滚动，但断点 + 滚动状态需要协同处理。比如你希望“小屏下始终半透、大屏下滚动后渐变更浓”，就得把断点逻辑和 JS 切换的 class 分开管理：
- JS 只负责添加/移除
.navbar-scrolled类，判断依据用navbar.getBoundingClientRect().top ，别用 <code>scrollY > 50 - CSS 中写三重组合：
.navbar（小屏纯透）、.navbar@media (min-width: 768px)（大屏基础渐变）、.navbar-scrolled（滚动后增强 alpha 值） - 如果用了深色模式，必须额外加
@media (prefers-color-scheme: dark)重写渐变色值，否则用户切暗色主题后仍看到亮色渐变 - 过渡动画只写
transition: background-color 0.3s, background-image 0.3s，别用all
真正难的不是写几行 CSS，而是理清 background-color、background-image、background 简写的层叠顺序，以及断点、滚动、深色模式三者如何不互相覆盖。很多“渐变不显示”的问题，根源是浏览器 computed 样式里 background-image 已被清空，而不是你漏写了某个类。
