怎么在 Bootstrap 特定断点给文字加渐变背景-Bootstrap教程-PHP中文网

必须用 background-image + 媒体查询实现断点渐变文字效果：小屏回退纯色（如 color: #000），md 断点（min-width: 768px）起启用 linear-gradient(90deg, #4f46e5, #7c3aed)，配合 -webkit-background-clip: text、background-clip: text 和 color: transparent 才生效；bootstrap 的 text-* 类不支持该效果。

怎么在 bootstrap 特定断点给文字加渐变背景

用 `background-image` + 媒体查询实现断点渐变背景

Bootstrap 的 text-* 工具类不支持渐变背景，也不能直接给文字加 background-clip: text 效果。必须手动写 CSS，靠媒体查询匹配 Bootstrap 断点（比如 md、lg）来控制何时启用渐变。

关键点是：渐变本身要配合 background-clip: text 和 color: transparent 才能让文字“透出”背景色；而断点控制必须和 Bootstrap 的 min-width 一致，否则响应行为会错位。

Bootstrap 5 的 md 断点是 min-width: 768px，不是 768px 或 768em
必须加 -webkit-background-clip: text（Safari/旧 Chrome 必需），background-clip: text 是标准写法
color: transparent 不可省略，否则文字颜色会盖住渐变
渐变方向建议用 to right 或 135deg，避免用 left/top 这类不兼容写法

完整 CSS 示例（适配 Bootstrap 5 的 `md` 及以上）

下面这段 CSS 让文字在 ≥768px 时显示从左到右的蓝紫渐变，小屏回退为纯黑：

.gradient-text {
  color: #000;
}
@media (min-width: 768px) {
  .gradient-text {
    background-image: linear-gradient(90deg, #4f46e5, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

注意：linear-gradient(90deg, ...) 等价于 to right，但角度写法兼容性更稳；如果用 to bottom，某些老 Android WebView 会失效。