bootstrap本身不支持断点处合并渐变，所有bg-gradient-*类仅设单层background-image且无媒体查询；实现多层渐变需手动用@media配合逗号分隔的background-image，并严格定义小屏background-color回退。
Bootstrap 本身不支持“在断点处合并两个背景渐变”——它没有提供任何能叠加、混合或条件性组合多个 background-image 的工具类或机制。所谓“合并”，实际是 CSS 层叠行为，不是 Bootstrap 功能，必须手动控制 background-image 和 background-color 的关系。
为什么 bg-gradient-* 类无法“合并”渐变
Bootstrap 的 bg-gradient-primary 等类只设置一个 background-image: linear-gradient(...)，且不带媒体查询；它不会叠加、也不会和另一个渐变共存。CSS 中同一个元素的 background-image 只能有一个值（除非你显式写多层逗号分隔值），而 Bootstrap 工具类从不这么做。
- 写
class="bg-gradient-primary bg-gradient-success"→ 后者覆盖前者，只生效一个渐变 - 加
d-md-block或md:bg-gradient→ 无效，Bootstrap 不解析md:前缀 - 试图用
background简写覆盖 → 会清掉background-color，导致小屏无 fallback
真正可控的“断点渐变合并”：用 media 查询 + 多层 background-image
想实现“小屏用 A 渐变，中屏用 B 渐变，大屏用 A+B 叠加渐变”，唯一办法是放弃工具类，直接写 CSS，并利用 CSS 多背景语法（逗号分隔）。
- 必须用
background-image，不能用background简写，否则会丢失background-color回退 - 多层渐变写法：
background-image: linear-gradient(90deg, #007bff, #6f42c1), linear-gradient(0deg, rgba(255,255,255,0.1), transparent) - 断点值严格对齐 Bootstrap 5：
@media (min-width: 768px)对应 md，@media (min-width: 992px)对应 lg - 小屏基础态必须先定义：
.hero { background-color: #fff; }，否则大屏可能没颜色可 fallback
示例：md 下单层蓝紫渐变，lg 下叠加一层浅色蒙版渐变
.hero {
background-color: #fff;
}
@media (min-width: 768px) {
.hero {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
}
@media (min-width: 992px) {
.hero {
background-image:
linear-gradient(135deg, #0d6efd, #6f42c1),
linear-gradient(0deg, rgba(255,255,255,0.15), transparent);
}
}
容易被忽略的兼容性与渲染细节
多层渐变不是“视觉叠加”那么简单，浏览器渲染顺序、透明度、z-index 无关但图层堆叠逻辑有关：
- 逗号分隔的
background-image按从前往后绘制：第一个在最上，最后一个在最下 - 如果第二层用了
transparent，但第一层没设background-color，底层可能透出父容器甚至 body 背景 - 旧版 Safari（iOS 15.4 之前）对多层渐变 +
rgba()支持不稳定，建议测试时用hsla()或降级为单层 - 子元素如
.card默认有白色背景，会完全遮住容器的多层渐变 —— 需显式设background-color: rgba(255,255,255,0.92)留出透出空间
真正的难点不在“怎么写两行渐变”，而在于确保每一层都在正确断点生效、每层都尊重 fallback 色、且不被子元素意外盖掉——这些全靠手写 CSS 控制，Bootstrap 工具类在此场景下只是干扰项。
