bootstrap的bg-gradient类在.navbar上无效，因其默认background-color会覆盖background-image且background简写声明会清空渐变；需手动用完整background声明（如linear-gradient(135deg,rgba(255,255,255,0.9),rgba(255,255,255,0.1))）并确保选择器权重足够。
Bootstrap 的 bg-gradient 类在导航栏（.navbar）上直接使用基本无效——不是你写错了，是它根本没机会生效。
为什么 bg-gradient 在 .navbar 上不显示渐变
因为 .navbar 默认自带高优先级的 background-color（比如 #fff 或 transparent），而 bg-gradient 只负责设置 background-image: linear-gradient()。当两者共存时，纯色背景会完全盖住渐变图层；更关键的是，Bootstrap 5 的 .navbar 样式表里有 background 简写声明（如 background: #fff），它会静默清空 background-image，导致渐变被丢弃。
- 检查开发者工具的 Computed 面板，大概率看到
background-image: none - 删掉所有
bg-*类（如bg-light、bg-white），它们会干扰自定义背景 -
bg-gradient-to-r这类 Tailwind 风格的方向类在 Bootstrap 5 中不存在，原生只支持固定角度（135deg）的bg-gradient-primary
正确写法：手动覆盖 background 并确保权重足够
必须用完整 background 声明把颜色、渐变、透明度揉在一起，不能依赖工具类拼接。示例 CSS：
.navbar.my-gradient-nav {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- 选择器要够具体，比如
.navbar.my-gradient-nav，避免被默认样式覆盖 - 别用
background-color单独设——它无法和background-image共存出渐变效果 - 如果需要毛玻璃，
backdrop-filter必须和rgba()背景配合，否则 iOS Safari 下可能失效 - 渐变方向优先用角度（
135deg），比to right兼容性更稳
滚动时动态切换渐变强度，JS 判断点很关键
纯 CSS 无法监听滚动，必须靠 JS 切换预设 class。但阈值不能硬写 window.scrollY > 50——导航栏高度随断点变化，顶部 banner 也会影响触发时机。
- 用
document.querySelector('.navbar').getBoundingClientRect().top ≤ 1更精准：只要导航栏贴顶就触发，不受页面其他结构干扰 - 过渡动画必须写在默认状态的 CSS 规则里：
.navbar { transition: background-color 0.3s ease, box-shadow 0.3s ease; }，而不是只写在.scrolled类中 - 起始背景值必须是
rgba(255, 255, 255, 0)，不是transparent，否则浏览器无法插值过渡 - 节流用
requestAnimationFrame，别用setTimeout，避免滚动停止后才变色
移动端和深色模式下容易被忽略的点
渐变背景在 iOS Safari 和部分安卓 WebView 中容易闪烁或跳帧，尤其在导航栏 position: fixed 且内容不足一屏时。
- 主动禁用滚动锚点：
document.body.style.overflowAnchor = 'none'，让scrollY更早更新 - 深色主题（
data-bs-theme="dark"）下，.scrolled类需单独定义深色背景值，例如rgba(33, 37, 41, 0.95) -
.navbar-collapse是独立容器，不会继承.navbar的背景，展开菜单时仍会透底——得单独给它加bg-white或同步切换 class - 小屏下建议用媒体查询彻底关闭渐变，回退到纯色背景，避免文字对比度不足
