移动端背景渐变“盖住一切”是因background简写覆盖了background-image，导致渐变被当作额外图层；修复需用完整background声明（含rgba透明度）、避免冲突工具类、显式重设文字/边框色，并真机调试Safari兼容性。
为什么移动端背景渐变看起来“盖住了一切”
这不是渐变本身层级高，而是它被渲染在了内容层之上——常见于 .navbar、.alert 或自定义容器中。根本原因是：Bootstrap 的某些组件（尤其是导航栏）内部用了 background 简写声明（比如 background: #fff !important），它会清空 background-image，但你又手动加了 background-image: linear-gradient() 却没处理好叠加逻辑，结果浏览器把渐变当成了“额外图层”，而文字、边框等元素没做 z-index 或 position 调整，视觉上就被压住了。
检查 computed styles 里 background-image 是否为 none
打开 Chrome DevTools → Elements → 右侧 Styles → 查看 Computed → 搜索 background-image。如果显示 none，说明它已被覆盖或未生效，大概率是以下之一：
- 写了
background: #fff或background-color: #fff，直接干掉了渐变 - 用了
bg-light+bg-gradient-to-r这类组合，但bg-light带!important，且 Bootstrap 5 不支持bg-gradient-to-r（这是 Tailwind 语法，无效） - 父容器有
overflow: hidden或clip-path，把渐变区域裁掉了 - 渐变色标太浅（如
#ffffff到#f8f9fa），和文字色接近，误以为“盖住了文字”
真正可控的修复方式：用 background 覆盖，而非 background-image
对移动端关键容器（如 .navbar、.hero-section），放弃拼接工具类，直接用完整 background 声明，确保渐变和颜色共存且不冲突：
.navbar-mobile-grad {
background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.1)) !important;
/* 不要再加 bg-* 类，它们会干扰 */
/* 如果需要 fallback 纯色，用 background-color 单独设，但别混进 background 简写里 */
}-
background是简写，能同时承载渐变和透明度，比只写background-image更稳 - 必须加
!important，否则 Bootstrap 的.navbar-light等类权重更高 - 避免用
to right，改用角度（如90deg），iOS Safari 对关键词解析更一致 - rgba() 里的 alpha 值要大于 0.05，否则在 OLED 屏上几乎不可见
文字和边框被“吃掉”的真实原因与补救
渐变背景本身没有 z-index，但它让底层对比度崩塌。原生 Bootstrap 的 color 和 border-color 是按纯色背景设计的，换成带透明度的渐变后，WCAG 对比度常跌破 4.5:1。
- 必须显式重设
color：浅渐变配text-dark或#212529；深渐变配text-white - 边框不能省：
border: 1px solid rgba(0,0,0,0.1)比无边框清晰得多 - 慎用
backdrop-filter: blur(10px)：iOS 15.4 之前 Safari 会把它和渐变一起模糊掉，文字更糊 - 如果用了深色模式（
data-bs-theme="dark"），渐变规则得单独写媒体查询或 JS 切换，不能靠 class 继承
移动端 Safari 对 linear-gradient 的解析非常严格，哪怕一个逗号位置错、一个括号没闭合，整条规则就静默失效——所以别信“差不多能用”，一定要在真机上用 Safari 开发者工具连设备调试。
