子元素背景色盖住容器渐变，尤其移动端明显，因.card、.alert等默认不透明背景完全遮挡底层渐变；需改用rgba()降低子元素背景透明度或移除其background-color，而非调整容器z-index。
不是渐变重叠，是子元素背景色盖住了容器渐变 —— 尤其在移动端，.card、.alert 或显式 background-color: white 的组件会完全遮挡底层渐变，视觉上像“重叠”，实则是被盖住。
为什么手机端特别明显
移动端屏幕窄，Bootstrap 默认的 .col-md-4 类在小屏下仍按列布局（不自动换行），导致多个卡片横向挤在一起；若每个卡片又自带 background-color: #fff，就会并排“叠”在渐变容器上，形成视觉重叠假象。
- 卡片未设
col-12，小屏仍三列并排，总宽度超视口 → 横向滚动 + 背景色块堆叠 -
.card默认有background-color: var(--bs-card-bg)（通常是白色），不透明，直接覆盖容器渐变 - 部分主题或自定义 CSS 给
.row加了overflow: hidden，裁掉渐变边缘，让过渡看起来突兀、断裂
bg-gradient 类在手机端失效的常见原因
bg-gradient 本身只是个“开关”，必须和至少一个 bg-* 颜色类（如 bg-primary）共用才生效；单独写 bg-gradient 在所有设备上都无效，但手机端更容易暴露问题，因为调试不便、渲染路径更敏感。
- 只写了
bg-gradient，漏掉bg-info等颜色类 → 渐变不生成，容器无背景，透出父级或 body 色 - 项目用了精简版 Bootstrap CSS 或 SCSS 中设了
$enable-gradients: false→ 手机端加载的 CSS 根本不含渐变规则 - 渐变容器高度塌陷：比如
<div class="container bg-gradient-primary"></div>为空 → 无高度，渐变不可见 - 被内联样式覆盖：
style="background-color: #fff"会清掉background-image，渐变消失
怎么验证是不是子元素盖住了渐变
打开手机浏览器开发者工具（或用 Chrome 远程调试），选中容器元素，看 Computed 面板里的 background-image 是否为有效渐变值；再逐个关闭子元素的 background-color，观察渐变是否浮现。
- 临时加
style="background-color: rgba(255,255,255,0.85)"替代纯白，让渐变微微透出，快速确认是否被盖 - 检查是否误把渐变加在
.row上：它有负外边距（margin-left: -15px; margin-right: -15px），实际渲染区域比容器小，渐变显示不全 - 用
outline: 1px solid red包裹子元素，看是否刚好框住“重叠区”——大概率就是那个background-color块
真正难处理的不是渐变写法，而是默认组件的不透明背景与设计意图的冲突；别指望靠调高容器 z-index 解决——它没定位，z-index 无效。关键在控制子元素的背景透出程度，以及确保断点类真正响应小屏。
