直接用 bg-gradient-primary 加断点类无效，因其无媒体查询支持；需用 @media 精确覆盖 background-image，小屏先设 background-color，再在断点内用 linear-gradient(90deg, #0d6efd, #20c997) 覆盖。
为什么直接用 bg-gradient-primary 加断点类无效
因为 bg-gradient-primary 是 Bootstrap 5 的全局工具类，它没有内置任何媒体查询，也不支持 md:bg-gradient-primary 这类 Tailwind 风格前缀。加 d-none d-md-block 只是控制元素显隐，不是“渐变开关”——小屏时元素被隐藏，但渐变逻辑本身仍存在；一旦显示，它就立刻生效，无法实现“渐变样式随断点动态切换”。
用 @media 精确覆盖 background-image
渐变本质是 background-image，不是 background-color，所以必须只改这一项，避免用 background 简写清掉已有颜色或纹理。基础态（如小屏）要先写在媒体查询外，再在断点内覆盖：
-
@media (min-width: 768px)对应 Bootstrap 的md断点，不能写成767px或770px - 方向优先用角度值（如
90deg），比to right兼容性更稳，尤其在旧版 Safari 中 - 颜色至少两个，否则仍是纯色；移动端 Safari 对
50%, #000这类 color-stop 格式敏感，建议写成50% #000 - 示例：仅在
md及以上启用左→右蓝青渐变，小屏回退为#f8f9fa
.hero {
background-color: #f8f9fa;
}
@media (min-width: 768px) {
.hero {
background-image: linear-gradient(90deg, #0d6efd, #20c997);
}
}
叠加多个渐变或渐变+纹理时的写法
多重背景需用逗号分隔的 background-image 值，顺序从上到下（第一项最上层）。如果想让渐变盖在图片上，就把 linear-gradient() 放前面；反之则放后面：
- 渐变在上、图片在下：
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(/img/bg.jpg); - 注意：所有
rgba()必须写全，rgb(0,0,0,0.4)是非法语法，整条声明会被浏览器忽略 - 若同时响应不同断点，每个渐变层都得单独写媒体查询，不能共用一个
@media块去覆盖整个background-image - 深色模式叠加时，别只靠断点，还得加
@media (prefers-color-scheme: dark)重定义渐变色值，否则亮色渐变在暗背景上可能不可读
自定义带断点前缀的渐变类（适合多处复用）
如果项目中多个组件都要“仅在 lg 启用垂直渐变”，可以封装成 bg-lg-gradient-to-b 类。但它不是 Bootstrap 原生类，必须手动补全 CSS，并注意权重问题：
- Bootstrap 的
bg-light等类自带!important，你的自定义类也得加，否则覆盖失败 - 用 Sass 时推荐复用断点变量：
@include media-breakpoint-up(lg) { ... }，避免硬编码像素值 - 不要试图把
background-color和background-image混在同一个background简写里——它会清掉原生按钮或卡片的背景状态逻辑 - 透明度控制必须通过
rgba()或渐变内的透明色值实现，opacity会影响子元素，不可取
background-color，且不能依赖工具类自动继承**。很多人只写了媒体查询里的渐变，忘了外面的基础色，结果大屏正常、小屏一片空白或继承了父级意外背景。 
