应直接修改 .progress 容器的 background-color 或 CSS 变量 --bs-progress-bg（Bootstrap 5），而非 .progress-bar；Bootstrap 4 需加 !important 或提高选择器权重，同时注意深色底下的文字、边框与对比度适配。
Progress 进度条的 background-color 被 .progress-bar 覆盖了怎么办
直接给 .progress 元素设 background-color 没用，因为 Bootstrap 的默认样式里 .progress-bar 是绝对定位或 flex 子项，它自己带背景色，且层级/渲染优先级更高；底色实际由 .progress 提供，但默认是浅灰（#e9ecef），要改深色系，必须精准覆盖它的 background-color。
- Bootstrap 5+ 中，
.progress的底色来自 CSS 变量--bs-progress-bg，推荐用这个覆盖，比硬写background-color更稳定 - 如果用的是 Bootstrap 4，变量不可用，需直接重写
.progress的background-color - 注意：不要只改
.progress-bar，否则底色还是浅的，对比度会极差
用 CSS 变量覆盖 --bs-progress-bg（Bootstrap 5）
在自定义 CSS 文件中（确保加载顺序在 Bootstrap CSS 之后），写：
:root {
--bs-progress-bg: #2d3748; /* 深灰底色，类似 slate-700 */
}
或者局部覆盖（更安全，避免全局污染）：
.progress.dark-bg {
--bs-progress-bg: #1a202c;
}
然后 HTML 中加 class：<div class="progress dark-bg">。这样既不影响其他进度条，又保证底色和 bar 颜色协调。
Bootstrap 4 怎么手动覆盖 .progress 底色
Bootstrap 4 没有 CSS 变量，必须用更具体的 CSS 选择器压过默认样式：
- 不能只写
.progress { background-color: #2d3748; }—— 默认样式带!important或高优先级，可能不生效 - 推荐写成：
.progress, .progress > .progress-bar { background-color: #2d3748; }不对，这是错的——.progress-bar是前景条，不该改它的底色 - 正确写法是：
.progress { background-color: #2d3748 !important; }，或提高权重：body .progress { background-color: #2d3748; } - 同时建议同步调暗
.progress-bar颜色，比如用bg-indigo-600替代默认的bg-primary，否则亮色条在深底上可能发虚
深色模式下文字和边框容易被忽略的细节
改完底色后，常见问题不是“没变色”，而是“看不清”：
-
.progress默认有border-radius和overflow: hidden，深色底 + 深色条时，边界容易糊成一片——加个浅色边框：border: 1px solid #4a5568; - 如果进度条里嵌了文字（如百分比数字），默认是白色，但在某些深色值下对比度不够，用
color: #e2e8f0;显式提亮 - 动画效果（如
.progress-bar-animated）在深背景下可能显得更突兀，可降低animation-timing-function的强度，或关闭动画
最常漏掉的其实是父容器背景——如果页面本身是深色主题，但 .progress 外层没设背景，底色再深也看不出层次。确认外层容器不是纯黑或透明。
