Bootstrap 5 进度条改背景色需覆盖 background-image（如设为 none 或自定义 linear-gradient），同时保留 background-color 作降级，并加 !important 确保生效；直接设 background-color 无效因默认渐变层优先渲染。
Bootstrap 5 进度条怎么改背景色？别碰 .progress-bar 的 background-color
直接覆盖 background-color 会失效，因为 Bootstrap 5 默认用 background-image: linear-gradient(...) 覆盖了纯色。你设的 background-color 被压在底层，根本看不见。
正确做法是重置或覆盖它的 background-image，同时保留 background-color 作为降级兜底：
- 用
background-image: none清掉默认渐变，再设background-color - 或者用自定义
linear-gradient替换，比如background-image: linear-gradient(to right, #4dabf7, #228be6) - 必须加
!important（Bootstrap 的样式权重高，不加很可能被覆盖）
为什么用 .progress-bar 类名改色总没反应？检查是否漏了 !important 和选择器优先级
常见错误是写成这样：
.progress-bar { background-color: #ff6b6b !important; }——看起来对，但实际无效。原因有二：
- Bootstrap 5 的
.progress-bar默认带background-image，它比background-color优先渲染 - 如果你的 CSS 文件加载顺序在 Bootstrap 之后，但没加
!important，仍可能被框架内联样式或更高权重要素覆盖 - 更稳妥写法是提升选择器权重，比如用
.progress > .progress-bar或加:not(.bg-*)排除内置颜色类干扰
想让不同进度段显示不同颜色（如 0–30% 红、30–70% 黄、70–100% 绿）？CSS 无法动态判断百分比，得靠 JS 控制类名
CSS 本身不能根据 aria-valuenow 值自动切换样式，所谓“分段着色”本质是人工划分区间 + 预设类名 + JS 绑定。
立即学习“前端免费学习笔记（深入）”；
- 先定义三组类：
.progress-bar-red、.progress-bar-yellow、.progress-bar-green，各自设好background-image或background-color - 监听进度变化（比如轮询
aria-valuenow或绑定事件），用 JS 判断数值范围，动态classList.replace() - 注意：不要在每次更新时
removeAll再add，用replace更轻量；也要防重复执行，加节流
兼容旧版 Bootstrap 4？background-image 规则位置变了，类名也略有差异
Bootstrap 4 的进度条默认用 background-color，渐变是可选的（比如 .bg-gradient 辅助类）。但升级到 v5 后，所有 .progress-bar 默认带渐变，且类结构从 .progress-bar.bg-* 变成 .progress-bar + style="background-image: ..." 内联。
- v4 中改色可直接写
.progress-bar.bg-custom { background-color: #5a67d8 !important; } - v5 必须显式清除
background-image，否则渐变层始终可见 - 如果项目混用 v4/v5，建议统一用
style属性内联覆盖，避开 CSS 优先级博弈
改颜色这事看着简单，真正卡住人的往往是默认渐变那层“看不见的遮罩”，以及没意识到 !important 在这里不是偷懒，而是必要手段。
