bootstrap 5 的 bg-gradient 类不支持响应式断点与透明度调节，必须用 @media + linear-gradient() + rgba() 手动实现；需注意断点值（768px）、角度写法、color-stop 格式及避免 opacity 影响内容。
Bootstrap 5 的 bg-gradient 类本身不支持响应式断点控制，也不支持透明度调节——想在特定断点（比如 md）启用渐变并控制背景层透明度，必须绕过工具类，用 @media + background-image: linear-gradient() + rgba() 组合手动实现。
为什么 bg-gradient-primary d-md-block 不起作用
这个组合看似合理，实际完全偏离目标：
-
bg-gradient-primary是静态类，在所有断点都生效；它不“开关”渐变，只注入一条固定background-image -
d-md-block控制的是display，不是渐变样式本身——小屏时元素隐藏，中屏时显示且带渐变，但这不是“渐变响应式”，是“元素显隐响应式” - 更关键的是：
bg-gradient-primary必须搭配bg-primary等颜色类才触发，而这些颜色类自带background-color，会盖住渐变图层；单独加bg-gradient-primary无效 -
md:bg-gradient-primary是 Tailwind 写法，Bootstrap 完全不识别，CSS 规则压根不会生成
用 @media 手动写渐变 + 透明度的正确姿势
这是唯一可控、兼容性好、语义清晰的方式。核心是：小屏用 background-color 回退，中屏及以上用 background-image 注入渐变，并在渐变色值里直接用 rgba() 控制透明度。
- 断点值必须严格匹配 Bootstrap 5 的
md：写@media (min-width: 768px)，不能是767px或770px - 渐变方向优先用角度（如
135deg），比to right兼容性更稳，尤其旧版 Safari - 颜色至少两个，否则仍是纯色；移动端 Safari 对 color-stop 格式敏感，写
50% #000比50%, #000更稳妥 - 别用
opacity：它会让文字、图标一起变淡；真正要的是背景层透明，内容保持 100% 不透明——只能靠rgba()或渐变里的透明色值
.hero-section {
background-color: #fff;
}
@media (min-width: 768px) {
.hero-section {
background-image: linear-gradient(135deg, rgba(13, 110, 237, 0.8), rgba(111, 66, 193, 0.8));
}
}
给导航栏（.navbar）加响应式渐变透明背景的特殊处理
.navbar 的样式优先级高、结构特殊，bg-gradient 工具类基本无效。常见错误是只改 background-color: rgba() 却没清掉默认的 background-image，结果渐变被遮盖或发灰。
- 必须同时设置：
background-color: rgba(255, 255, 255, 0.1)+background-image: none，否则渐变图层或默认背景色会干扰 - 如果要用渐变+透明，直接用完整
background声明：background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.1))，并删掉所有bg-*类（如bg-light） - 滚动后变色时，
transition必须写在默认状态，且起始值不能是transparent，得用rgba(255,255,255,0)，否则无法过渡 - 若加毛玻璃效果，追加
backdrop-filter: blur(10px)和-webkit-backdrop-filter，但注意 iOS Safari 旧版本兼容性
最易被忽略的一点：渐变透明度不是靠覆盖 background-color 实现的，而是必须把透明信息写进 linear-gradient() 的色值里，或者用 background-color: rgba() 作为底层 fallback。任何试图用 opacity、!important 强刷或依赖工具类拼接的做法，都会在某个浏览器或断点下失效。
