Bootstrap 5 的 bg-gradient 类不支持断点响应式控制和透明度调节；必须用 @media (min-width: 768px) 配合 background-image: linear-gradient() 和 rgba() 色值实现 md 断点下蓝紫渐变及 80% 背景透明，小屏回退为纯色背景。
Bootstrap 5 的 bg-gradient 类本身不支持断点响应式控制，也**不支持透明度调节**；想实现“仅在 md 断点启用蓝紫渐变 + 80% 背景透明”，必须绕过工具类，直接用 background-image + rgba() 组合，并配合媒体查询精确控制生效范围。
为什么 bg-gradient-primary d-md-block 不起作用
因为 d-md-block 控制的是 display，不是渐变开关——小屏时元素可见，bg-gradient-primary 依然生效；中屏时元素显示，但渐变早已存在。它既不能“关掉小屏渐变”，也不能“只在中屏注入渐变”。更糟的是，bg-gradient-primary 底层是 background-image: linear-gradient(...)，而默认的 background-color（比如 bg-light）会盖在渐变下方，导致你根本看不到渐变效果。
-
bg-gradient只是“渐变开关”，必须搭配bg-primary等颜色类才触发，但这些类本身无断点逻辑 - 加
!important到bg-gradient上没用：它不控制透明度，也不参与断点判断 - 试图用
md:bg-gradient-primary是 Tailwind 写法，Bootstrap 完全不识别
用 @media + background-image 实现断点渐变
这是最可控、兼容性最好的方案。关键在于：用媒体查询包裹 background-image，并确保基础态（小屏）有明确的 background-color 回退。
- 断点值必须严格匹配 Bootstrap 5 的
md：写@media (min-width: 768px)，不能是767px或770px - 必须用
background-image，不是background—— 后者会清掉background-color，导致小屏回退失效 - 渐变方向优先用角度（如
135deg），比to right更稳；旧版 Safari 对to-r或left to right支持差 - 示例：仅在 md+ 显示左上→右下蓝紫渐变，小屏为纯白
.my-section {
background-color: #fff;
}
@media (min-width: 768px) {
.my-section {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
}
如何叠加透明度（不是 opacity）
别用 opacity，它会让文字、图标、子元素一起变淡。真正需要的是背景层透明，内容保持 100% 不透明 —— 这只能靠 rgba() 配合 background-color 实现，或在渐变里直接写透明色值。
- 如果要用纯色回退+透明：小屏写
background-color: rgba(255, 255, 255, 0.9)，中屏渐变里两个色标都用rgba，例如rgba(13, 110, 237, 0.8), rgba(111, 66, 193, 0.8) - Bootstrap 5.2+ 的
bg-opacity-*类对渐变无效：它只作用于background-color，且要求该颜色是 RGB/RGBA 格式，而bg-primary是 HEX，无法解析 - 导航栏等复杂组件要额外清除
background-image：Bootstrap 默认给.navbar加了渐变图层，得显式写background-image: none !important才能透出你自定义的rgba()背景
深色模式与移动端 Safari 的双保险
渐变 + 透明在深色模式下极易翻车：浅色渐变叠在深色背景上可能对比度不足；iOS Safari 对 color-stop 语法敏感（比如 50%, #000 会被忽略），必须写成 50% #000。
- 若项目需适配深色模式，必须单独加
@media (prefers-color-scheme: dark)块，重定义渐变色标和透明度 - 不要依赖单一 CSS 方案：移动端 Safari 15.4 之前不支持
background-image与background-color混合渲染，此时应降级为纯rgba()背景 - 文字可读性不是“看着差不多就行”：浅渐变配浅字、深渐变配白字，必须用 WebAIM Contrast Checker 实测是否 ≥ 4.5:1
真正麻烦的不是写几行 CSS，而是渐变方向、alpha 值、色标位置三者稍一变动，文字就可能瞬间不可读；这没法靠工具自动修复，得手动调、反复测、真机验。
