bootstrap 5 不支持断点响应式渐变蒙版，需用媒体查询配合 background-image 手动实现：小屏仅基础背景，大屏叠加 rgba 渐变蒙版；方向推荐 180deg，断点严格对齐 768px（md），多层蒙版用逗号分隔并注意渲染顺序。
Bootstrap 5 原生不支持断点响应式渐变蒙版（比如 bg-gradient-md 或 md:bg-gradient-to-b），所有 bg-gradient-* 类都是全局生效、方向固定为 135deg、且无法控制透明度或断点。真正在不同断点下启用/禁用渐变蒙版，必须手动写媒体查询 + background-image。
为什么 bg-gradient-primary d-md-none 不是蒙版开关
这个组合只是把整个元素隐藏了，不是“关掉渐变蒙版”——小屏时你根本看不到内容，更谈不上蒙版叠加效果。真正需要的是：小屏时只保留底层背景（如图片或纯色），大屏时在它上面叠一层渐变，用于文字可读性增强。
-
d-md-none控制display，和背景层完全无关 -
bg-gradient-primary本身会注入background-image: linear-gradient(...)，但若父容器已有background-color或background-image（比如一张 banner 图），它会被盖住或冲突 - 渐变类不带 alpha，无法直接做“半透蒙版”，必须自己写
rgba()色值
用 @media + background-image 实现断点蒙版
核心思路是：小屏用纯色或图片作底，大屏在此基础上叠加一层透明渐变，作为文字蒙版。关键在于只改 background-image，不动 background-color 或原有背景图。
- 断点值严格对齐 Bootstrap 5：
@media (min-width: 768px)对应md，不能写767px或770px - 蒙版推荐垂直方向：
linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0))（上深下透）比to bottom兼容性更好 - 务必确保基础态（小屏）已设好背景，例如：
.hero { background: url(/img/banner.jpg) center/cover; } - 示例：仅在
md+叠加黑色渐变蒙版
@media (min-width: 768px) {
.hero {
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)),
url(/img/banner.jpg);
}
}
多断点叠加蒙版（如 sm → md → lg）
如果需要在 sm 无蒙版、md 单层、lg 双层（比如渐变+模糊），不能靠工具类链式叠加，得用嵌套媒体查询，且注意层叠顺序。
- 写法上，
background-image支持逗号分隔多层，但浏览器渲染顺序是从左到右（最左在最上） - 避免在同一个选择器里混用
background和background-image，否则后者可能被覆盖 - 示例：lg 断点叠加两层蒙版（深色渐变 + 微弱高斯模糊伪效果）
@media (min-width: 992px) {
.hero {
background-image:
linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)),
url(/img/banner.jpg);
}
}
容易被忽略的兼容性与性能点
渐变蒙版看似简单，但在真实项目中常因几个细节失效或卡顿：
- iOS Safari 对
background-image多层叠加 +cover渲染有延迟，加will-change: background;可缓解（但别滥用，影响滚动性能） - 如果底层是
<picture></picture>或object-fit图片，蒙版位置可能错位——优先用 CSSbackground控制图层，而非 HTML 图片标签 - 深色模式下，
rgba(0,0,0,0.6)在暗背景上可能过重，需额外加@media (prefers-color-scheme: dark)调整 alpha 值 - 不要给蒙版容器设
opacity，它会让文字一起变淡；透明度必须来自rgba()或渐变色 stops
