不能只用opacity因会使文字图标全透明，需用rgba()控背景透明；bootstrap 5默认样式优先级高，须提权或删默认类；渐变需background-image+background-color组合；滚动变色应基于元素位置而非固定scrolltop值。
导航栏透明渐变为什么不能只写 opacity
直接给 .navbar 设 opacity: 0.9 看似简单，但会让整个导航栏（包括文字、图标、下拉菜单）都变透明，交互体验变差。真正需要的是「背景层透明，内容保持不透明」——这必须用 background-color 的 rgba() 值实现。
RGBA 中的 a（alpha）控制背景色本身的不透明度，不影响子元素。例如 rgba(255, 255, 255, 0.8) 是半透明白底，文字默认仍是 100% 不透明。
Bootstrap 5 默认 navbar 背景类会覆盖自定义 rgba 样式
Bootstrap 5 的 .navbar 默认带 background-color: #fff（白底），且很多主题类（如 .navbar-light）内联了更高优先级的样式。单纯在 CSS 文件里写 .navbar { background-color: rgba(255, 255, 255, 0.7); } 很可能被忽略。
- 必须提高选择器权重：用
.navbar.navbar-expand-lg { ... }或加!important（仅调试时临时用） - 更稳妥的做法是移除默认背景类，比如删掉 HTML 中的
bg-white或bg-light - 如果用了
.navbar-dark，记得同步调整文字颜色，否则浅色文字在半透背景上可能看不清
渐变 + 透明背景要分两层写：background-image 和 background-color
纯 rgba() 只能做单色透明，要实现「从透明到半白」这类垂直渐变，得组合使用：
.navbar {
background-color: rgba(255, 255, 255, 0.1);
background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}
注意顺序：background-image 在上层，background-color 是底层 fallback。这样即使渐变不支持（极老浏览器），至少还有基础透明色。
- 避免用
hsla()渐变——Bootstrap 5 默认 CSS 变量（如--bs-light）是 hex 或 rgb，混用 hsla 易出错 - 移动端滚动时，渐变可能因视口重绘闪烁，可加
will-change: background;缓解（但别滥用） - 如果 navbar 固定在顶部（
.fixed-top），确保 body 有足够 padding-top，否则内容会被半透 navbar 遮挡
滚动后切换为实色背景的 JS 判断点很关键
常见需求是「初始透明，滚动后变实色」。不能只监听 scroll 事件然后改 class，因为 Bootstrap 的 .navbar 高度在不同断点下不同（比如折叠/展开状态），硬写 scrollTop > 50 容易误触发。
- 推荐用
getBoundingClientRect().top 判断 navbar 是否已完全离开视口顶部 - 或者监听
scroll后取document.documentElement.scrollTop，再对比navbar.offsetHeight（注意响应式变化） - 切换 class 时，用
transition: background-color 0.3s ease让变化柔和，但不要对background-image做 transition——多数浏览器不支持渐变过渡
真正难的不是写 rgba，而是让透明、渐变、滚动响应、响应式高度这几件事互不打架。每次调完记得在手机横屏、折叠菜单展开、页面刚加载这几个状态里快速过一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
