bootstrap 5 的 bg-gradient-* 类不支持断点响应式控制，必须用媒体查询配合 background-image 实现仅在 md 及以上启用渐变、小屏回退纯色。
移动端渐变背景太亮，是因为没断开响应式控制
Bootstrap 5 的 bg-gradient-* 类（比如 bg-gradient-primary）在所有断点下都生效，包括 xs（
你不能靠改 background-image 的 alpha 值来调暗，因为线性渐变本身没有透明通道；真正有效的是：在小屏彻底禁用渐变，回退到纯色背景。
- 直接删掉 HTML 中的
bg-gradient-*类，改用bg-primary这类纯色类 - 如果必须保留渐变逻辑，就用媒体查询只在
md及以上启用：@media (min-width: 768px) { .bg-gradient-responsive { background-image: linear-gradient(135deg, #0d6efd, #6f42c1); } } - HTML 中写成：
<div class="bg-gradient-responsive bg-light"> —— 注意顺序：自定义渐变类在前，基础背景色类在后，确保小屏时 <code>bg-light生效用了 bg-gradient-* 但小屏还是亮，检查是否被其他样式覆盖
常见错误是给容器加了
bg-white或bg-light，结果和bg-gradient-primary同时存在。CSS 里background-color和background-image共存时，后者会盖在前者上面，但若渐变色本身明度高（比如linear-gradient(to right, #fff, #e9ecef)），视觉上反而更“发灰”。- 打开 DevTools，选中元素，看
Computed面板里的background展开值，确认最终生效的是哪个声明 - 避免用
to right、to bottom这类方向关键词——部分安卓 WebView 渲染异常，导致渐变不完整，残留大片高光区 - 统一用角度写法，比如
135deg，并手动压低起止色的明度：linear-gradient(135deg, #0a3d62, #1e5799)比默认primary渐变更沉稳
想全局调暗所有渐变，别碰类名，改 CSS 变量
Bootstrap 5 不提供渐变色的统一变量，但你可以用
:root覆盖所有background-image声明。前提是你的项目允许自定义 CSS，且不依赖 Sass 编译流程。- 在自定义 CSS 文件末尾加：
:root { --bs-gradient-darken: linear-gradient(135deg, #0a3d62, #1e5799); } .bg-gradient-primary { background-image: var(--bs-gradient-darken) !important; } - 注意加
!important：Bootstrap 5 的bg-gradient-primary是单类选择器，权重不够压过某些框架注入的样式 - 别试图用 JS 动态替换所有
background-image——DOM 查询+遍历成本高，且无法覆盖伪元素或未来插入的节点
深色模式下渐变依然刺眼，得配合 data-bs-theme 单独处理
当
data-bs-theme="dark"生效时，Bootstrap 会重设--bs-body-bg等变量，但不会动你的渐变定义。结果就是：深色页面上，一个亮蓝紫渐变横在中间，像贴了张反光膜。- 必须为暗色主题单独写规则：
[data-bs-theme="dark"] .bg-gradient-responsive { background-image: linear-gradient(135deg, #1a202c, #2d3748); } - 不要只改颜色，同步检查文字颜色是否适配——渐变底色变深后，
text-light可能不够白，建议改用text-white或自定义color: #f7fafc - 如果用了
bootstrap-dark-5补丁包，它已预置部分暗色渐变变量，可直接引用--bs-gradient-dark，但需确认版本 ≥2.1.0
最常被忽略的一点：渐变不是越暗越好。在 OLED 屏幕上，纯黑背景 + 深蓝渐变可能导致边缘泛紫，实际体验比中灰渐变更疲劳。建议用 LAB 色彩工具测一下对比度，确保文字与渐变任意区域的对比度 ≥4.5:1。
- 打开 DevTools，选中元素，看
