应直接修改 .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 颜色协调。<h3>Bootstrap 4 怎么手动覆盖 .progress 底色</h3>
<p>Bootstrap 4 没有 CSS 变量，必须用更具体的 CSS 选择器压过默认样式：</p>
<ul>
<li>不能只写 <code>.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 外层没设背景，底色再深也看不出层次。确认外层容器不是纯黑或透明。
