Bootstrap如何设置特定断点下的背景渐变填充色值方案

直接加 bg-gradient-primary d-md-block 不生效，因渐变无断点控制，仅容器显隐；需用 @media 控制 background-image 或自定义带断点前缀的渐变类，并注意文字对比度与背景兼容性。

为什么直接加 bg-gradient-primary d-md-block 不生效

因为 bg-gradient-primary 是纯样式类，不带任何媒体查询逻辑；d-md-block 控制的是 display 属性，不是渐变开关。两者叠加的结果是：小屏时元素被隐藏（display: none），大屏时元素显示且带渐变——但你真正想要的“仅在 md 断点启用渐变”，其实没发生。渐变本身从没被条件化，只是容器被显隐了。

用 @media 直接控制 background-image

这是最可控、兼容性最好、也最容易调试的方式。关键不是覆盖整个 background，而是只动 background-image，避免清掉已有 background-color 或纹理。

1. 断点值必须严格匹配 Bootstrap 5 的 md：写 @media (min-width: 768px)，别用 767px 或 770px
2. 方向优先用角度（如 135deg），比 to right 更稳；旧版 Safari 对 to-r 完全不识别
3. 颜色至少两个，否则仍是纯色；移动端 Safari 对 50%, #000 这种写法敏感，改用 50% #000 更可靠
4. 示例：

   @media (min-width: 768px) {.hero-section {background-image: linear-gradient(135deg, #0d6efd, #6f42c1);}}

自定义带断点前缀的渐变类（适合多处复用）

如果多个组件都要在 md 断点启用相同渐变，重复写媒体查询不如封装成类。但注意：这类自定义类必须用 !important，否则会被 Bootstrap 原生 bg-light 等带 !important 的类压制。

1. 推荐 SCSS 写法（利用 Bootstrap 断点变量）：

   @include media-breakpoint-up(md) {.bg-md-gradient-primary {background-image: linear-gradient(135deg, #0d6efd, #86b7fe) !important;}}

2. HTML 中使用顺序很重要：<div class="bg-md-gradient-primary bg-light">——自定义类在前，基础色类在后，确保小屏回退到 bg-light 的纯色
3. 别用 background 简写，它会一并抹掉 background-color 和可能存在的图片背景

渐变生效但文字看不清？这常被忽略

Bootstrap 的文字色（比如 text-dark 或 text-white）是按纯色背景设计的。换成浅色渐变后，对比度常跌破 WCAG 4.5:1 标准，尤其在阳光直射屏幕时几乎不可读。

1. 必须同步调整文字色：text-dark 配浅渐变，text-white 配深渐变
2. 加一道实色边框（如 border: 1px solid #dee2e6）能立刻提升辨识度
3. 渐变方向、alpha 值、色标位置三者任意一个微调，都可能导致可读性断崖式下跌——没法靠工具自动修复，得手动调、反复测