直接覆盖 background-image 才生效，因为 bootstrap 5 的 .progress-bar 默认用 background-image: linear-gradient() 渲染填充色，background-color 会被完全遮盖；正确做法是显式设 background-image: none !important 并配合 background-color，或直接重写自定义渐变。
直接覆盖 background-image 才生效，background-color 会被压在底层
Bootstrap 5 的 .progress-bar 默认用 background-image: linear-gradient() 渲染填充色，你设的 background-color 看不见——它被渐变图层完全遮盖。打开开发者工具的 Computed 面板，会发现 background-image 非空，而 background-color 虽有值但“不可见”。
正确做法是显式替换或清空 background-image：
-
background-image: none !important;+background-color: #28a745;（纯色降级兜底） - 或直接写自定义渐变：
background-image: linear-gradient(to right, #28a745, #198754) !important; - 必须至少两个色标，
linear-gradient(to right, #007bff)是无效语法 - 方向要和动画一致：条纹动画默认横向流动，所以用
to right或90deg；竖向条纹则用to bottom或0deg
.progress-bar-striped 和 .progress-bar-animated 必须同步改 background-image
这两个类共享同一套背景图逻辑。只改其中一个，会导致视觉错位或动画卡死：
- 漏掉
.progress-bar-animated→ 条纹颜色变了，但不动 - 漏掉
.progress-bar-striped→ 动画跑起来了，但还是默认灰蓝条纹 - 两个选择器里渐变方向不一致（比如一个
to right，一个to bottom）→ 动画方向打架，条纹跳变
稳妥写法是合并选择器：
.progress-bar-striped,
.progress-bar-animated {
background-image: linear-gradient(to right, #28a745, #198754) !important;
}
用 linear-gradient 模拟条纹时，background-size 和 animation 得自己配
如果不想碰 base64 SVG，用 CSS 渐变模拟条纹更可控，但参数不能乱调：
- 标准横条纹写法：
background-image: linear-gradient(90deg, #28a745 25%, transparent 25%, transparent 50%, #28a745 50%, #28a745 75%, transparent 75%, transparent); - 必须加
background-size: 1rem 1rem;（或具体像素值），否则条纹在不同宽度容器里会拉伸变形 -
.progress-bar-animated对这种渐变无效，得手动加 animation：animation: flowBG 2s linear infinite;+ 自定义@keyframes flowBG { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } - 角度用
90deg是竖条纹，0deg或to right才是横条纹
深色模式下文字看不清？别只调背景，同步改 color 和 border
浅色渐变（如 #e9ecef → #f8f9fa）配默认 text-white 会严重失焦；深色渐变（如 #212529 → #343a40）配 text-dark 同样不可读。原生 Bootstrap 的文字色是按纯色背景设计的，对比度常跌破 4.5:1。
- 强制指定文字色：
color: #fff;或color: #111;，别依赖工具类 - 加一道实边框提升辨识度：
border: 1px solid #495057; - 用 WebAIM Contrast Checker 校验，肉眼判断不准——尤其在阳光直射屏幕时
- 渐变方向、alpha 值、色标位置三者稍一变动，可读性就可能断崖下跌，没法靠工具自动修复，得手动调、反复测
