bg-gradient在bootstrap 4容器中不显示渐变，主因是未搭配bg-*类（如bg-primary）导致无基础色注入background-image，或被bg-white等带!important的背景色覆盖；另需检查子元素遮挡、浏览器兼容性（缺-webkit前缀）、缺少fallback色及渐变方向语法问题。
直接加 bg-gradient 类到容器上不显示渐变，大概率不是代码写错，而是被 Bootstrap 4 的背景色覆盖、浏览器兼容性拦截，或子元素遮挡了。
为什么 bg-gradient 在 Bootstrap 4 容器里没反应
Bootstrap 4 的 bg-gradient 工具类依赖 background-color 基础值来注入 background-image: linear-gradient()，但很多容器（比如 .card、.jumbotron 或自定义 .container）本身没设背景色，导致渐变无处“附着”。更常见的是：你加了 bg-gradient-primary，但同时又加了 bg-white 或 bg-light —— 后者带 !important，直接把渐变压没了。
-
bg-gradient-primary必须和一个bg-*类（如bg-primary）搭配使用才生效；单独用无效 - 检查 DevTools 的 Computed 面板，看最终
background-image是否被划掉，或者background-color是否覆盖了整个背景 - Bootstrap 4 默认禁用渐变？确认 SCSS 中没设
$enable-gradients: false—— 如果设了，所有bg-gradient类会静默失效，控制台不报错
background-image: linear-gradient() 手动写也不显示？查这三点
绕过工具类、直接写 CSS 是最可控的调试方式，但容易漏关键细节：
- 必须提供
background-colorfallback：比如background-color: #f8f9fa，否则在旧版 Safari 或微信 X5 内核里会完全透明 - 必须加
-webkit-linear-gradient()前缀：iOS 12 及以下、部分安卓 WebView 只认这个 - 别用
background简写覆盖：写background: linear-gradient(...)会清掉已有的background-color或图片，改用background-image单独声明
最小可用示例：
.hero {
background-color: #f8f9fa;
background-image: -webkit-linear-gradient(135deg, #0d6efd, #6f42c1);
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
渐变“写了但看不见”，其实是被子元素盖住了
这是最常被忽略的视觉断层原因：父容器渐变明明生效了，但里面放了个 .card、.alert 或 div 带了白色背景，整块区域就变成纯白，底层渐变彻底不可见。
- 检查子元素是否显式设置了
background-color: white或bg-white—— 改成background-color: rgba(255, 255, 255, 0.9)留点透出空间 - 别把渐变写在
.row上：.row有负外边距，实际渲染区域比容器窄，渐变可能只在边缘闪一下 - 如果用了
overflow: hidden+ 圆角 + 渐变组合，某些浏览器会裁掉渐变边缘，导致“半截渐变”效果
移动端 Safari / 微信里渐变全黑或全白？方向和颜色写法要保守
移动端对 CSS 渐变语法更敏感，尤其 iOS 14 以前的 Safari 和微信 X5 内核：
- 方向优先用角度（如
135deg），别用to right或to bottom—— 旧版 Safari 对to-语法支持不稳定 - 色标写法用空格分隔，比如
50% #000，别写50%, #000—— X5 内核会解析失败 - 至少写两个颜色：只写一个就是纯色，不是渐变；且避免用命名色（如
blue），不同内核解析差异大
真正容易被忽略的是：渐变生效 ≠ 可读。浅色渐变配默认 text-dark，阳光下文字几乎隐形——这不是调试问题，是可访问性断裂，得同步调 color 和 border-color。
