background-image 被 background-color 盖住是因为后者带 !important 且简写会清空 background-image；应设 background-color: transparent，单独声明 background-image 并确保容器有高度、无 overflow 遮挡。
为什么 background-image 被 background-color 盖住了
Bootstrap 5 的 bg-* 类（如 bg-light、bg-primary）默认带 background-color: #f8f9fa !important，而渐变是靠 background-image 实现的。CSS 渲染规则是：background-image 画在 background-color 上层——但前提是 background-color 没有完全遮挡或干扰渲染逻辑。
常见失效场景：
- 给元素同时加
bg-gradient-primary和bg-white→ 后者强制覆盖底层，渐变不可见 - 用
background: #fff这种简写 → 它会清空background-image，渐变直接消失 - 父容器有
background-color且未设background-color: transparent→ 子元素渐变被“垫底色”盖住
怎么让渐变真正显示在最上层
核心原则：不碰 background 简写，只动 background-image，并确保下层背景“透明可透”。
实操要点：
- 把基础背景色设为
background-color: transparent（不是none），再单独用background-image注入渐变 - 如果必须保留 fallback 纯色（比如小屏降级），把它写在媒体查询外：
.hero { background-color: #fff; }，再在@media里只覆盖background-image - 避免在同一个元素上混用
bg-gradient-*和bg-*—— 它们权重相同，后者常胜出 - 检查 computed styles 中
background-image是否为none；如果是，大概率被某处background简写干掉了
多层背景叠加时的顺序怎么控制
浏览器按 CSS 声明顺序从后往前绘制多重背景（即最后声明的在最上层）。但 Bootstrap 工具类不支持原生多重背景语法，必须手写。
正确写法示例（渐变 + 底纹图）：
.hero-section {
background-color: transparent;
background-image:
url("pattern.png"),
linear-gradient(135deg, #0d6efd, #6f42c1);
background-position: center, center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
}
注意：
- 图片写在前面，渐变写在后面 → 渐变在上层
- 不能用
background: url(...) linear-gradient(...)简写，否则会重置所有子属性 - 移动端 Safari 对多重背景中
background-size的解析较敏感，建议显式声明每项
自定义类和 Bootstrap 工具类冲突时怎么办
Bootstrap 的 bg-light、bg-dark 等类自带 !important，你的自定义 background-image 规则若没同等权重，会被静默忽略。
解决方式：
- 加
!important到你的background-image声明上（这是少数合理使用!important的场景） - 提高选择器权重，比如用
.my-section.bg-gradient-md替代单纯.bg-gradient-md - 彻底绕开工具类：删掉所有
bg-*，纯靠自定义 class 控制颜色、渐变、透明度 - 别依赖
bg-gradient-primary d-md-block组合——d-md-block控制显隐，不是层级开关
最易被忽略的一点：渐变是否生效，和容器是否有高度、是否被父级 overflow: hidden 截断、是否被 z-index 层级更低的兄弟元素遮挡，全有关联。先确认 computed height 是预期值，再调样式。
