因为bg-gradient-primary是全局静态类，无媒体查询，不支持断点前缀；真正响应式渐变需用@media(min-width:768px)配合background-image:linear-gradient()实现，基础态先设background-color，仅覆盖渐变而不清空背景。
为什么直接加 bg-gradient-primary 无法在断点处替换渐变
因为 bg-gradient-primary 是 Bootstrap 5 的全局工具类，它不包裹任何媒体查询，也不支持断点前缀（如 md:bg-gradient-primary 是 Tailwind 语法，Bootstrap 完全不识别）。它在所有尺寸下都生效，且方向固定为 135deg，颜色来自 $primary 变量，无法动态切换或“替换”。所谓“替换渐变图片”，本质是替换 background-image 值，而 Bootstrap 的渐变类只提供一套静态值，没有条件逻辑。
用 @media 替换 background-image 的正确写法
真正可控的方式是绕过工具类，直接对目标元素写媒体查询，仅修改 background-image，保留原有 background-color 或纹理不被覆盖。关键点：
- 基础态（小屏）必须先声明
background-color，例如.hero { background-color: #f8f9fa; } - 断点值严格对齐 Bootstrap 5：用
@media (min-width: 768px)对应md，不是767px或770px - 只改
background-image，不用background简写——后者会清掉已设的background-color - 方向优先用角度（如
90deg表示从左到右），比to right在旧版 Safari 中更稳 - 渐变色至少两个，否则退化为纯色；移动端 Safari 对
50% #000格式比50%, #000更兼容
示例：小屏用纯白背景，md 起替换成蓝→青线性渐变
.hero {
background-color: #fff;
}
@media (min-width: 768px) {
.hero {
background-image: linear-gradient(90deg, #0d6efd, #20c997);
}
}
如何复用同一套断点逻辑多次（比如多个组件都要 lg 起启用垂直渐变）
可以定义自定义类（如 bg-lg-gradient-to-b），但要注意权重和回退机制：
- 必须加
!important：Bootstrap 的bg-light等类自带!important，你的规则不加则无法覆盖 - SCSS 中推荐复用断点变量：
@include media-breakpoint-up(lg) { ... }，避免硬编码像素值 - 颜色建议引用 Bootstrap 调色板变量（如
$primary,$success），便于主题同步 - HTML 中 class 顺序很重要：
class="bg-lg-gradient-to-b bg-white"——自定义类在前，保底色类在后 - 别漏掉小屏 fallback：没写基础
background-color，小屏可能完全透明或继承父级背景
容易被忽略的叠加与可访问性问题
渐变一加上，常出现两种“看不见”：
- 子元素遮挡：比如
.card默认有白色background-color，会完全盖住容器的渐变——需改为background-color: rgba(255,255,255,0.9)留透出空间 - 文字对比度断裂：浅色渐变配默认
text-dark时，在阳光下几乎不可读。WCAG 要求至少 4.5:1，必须同步调文字色（如深渐变配text-white） - 深色模式未适配：
prefers-color-scheme: dark下，原亮色渐变依然显示——需额外加媒体查询重写色值 - 如果用了
background简写覆盖了已有样式，computed styles里background-image会变成none，这不是渐变没加载，而是被干掉了
真正难的不是写对断点，而是让渐变在各种嵌套、主题、设备环境下稳定透出且可读。
