必须替换 background-image 的 base64 SVG 中 fill 值并加 !important 覆盖，同时为 .progress-bar-animated 补全 animation: progress-bar-stripes 1s linear infinite。
如何覆盖 .progress-bar-striped 的条纹背景色
bootstrap 默认的条纹进度条（.progress-bar-striped）用的是 svg 背景图，不是纯 css 渐变，所以直接改 background-color 没用。必须替换整个 background-image 才能生效。
实操建议：
- 用自定义 CSS 覆盖 Bootstrap 的
.progress-bar-striped规则，优先级要足够高（比如加!important或提高选择器权重） - 新背景图必须是 base64 编码的 SVG，且其中的
fill值为你想要的颜色（如#28a745） - 别漏掉响应式条纹动画（
.progress-bar-animated），它依赖同一张 SVG，只是加了animation
示例（覆盖为绿色条纹）：
.progress-bar-striped {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath fill='%2328a745' d='M0 0h2v2H0V0zm2 2h2v2H2V2z'/%3e%3c/svg%3e") !important;
}
background-image 中的 SVG 颜色怎么改
那个 base64 字符串本质是编码后的 SVG，fill='%2328a745' 就是条纹颜色（URL 编码后 # 变成 %23）。改颜色只需替换这个十六进制值。
常见操作：
- 在线工具解码 base64（如 base64.guru），改完再编码回去，避免手写出错
- 注意：SVG 里有两个
<path></path>，它们的fill必须一致，否则条纹会断开或错位 - 深色背景下建议用浅色条纹（如
%23ffffff），否则看不见
为什么加 !important 很可能绕不开
Bootstrap 4/5 的原始规则里，.progress-bar-striped 的 background-image 是写在 .progress-bar 后面的独立规则，而且用了 !important（Bootstrap 5.3+ 已移除，但很多项目仍用旧版）。你自己写的 CSS 如果没加 !important，大概率被覆盖。
更稳妥的做法：
- 把自定义样式放到 Bootstrap CSS 之后引入
- 用更强的选择器，比如
.my-progress .progress-bar-striped - 或者老老实实用
!important—— 这不是坏习惯，是和框架“打架”时的合理妥协
动态条纹（.progress-bar-animated）失效怎么办
动画依赖两个条件：一是条纹背景图存在，二是 animation 属性启用。如果只改了 background-image 却忘了补 animation，条纹就静止了。
检查点：
- 确认你的 CSS 同时覆盖了
.progress-bar-striped和.progress-bar-animated - Bootstrap 5 的动画名是
progress-bar-stripes，别拼错 - 如果用了 CSS-in-JS 或 Shadow DOM，
@keyframes可能未正确注入，得手动补全
补动画的最小代码：
.progress-bar-animated {
animation: progress-bar-stripes 1s linear infinite;
}
条纹颜色这事看着小，但 SVG 编码、选择器权重、动画依赖三者一碰上，很容易改了一处漏两处。最常卡住的地方是：以为改了 background-color 就行，结果条纹还是灰色——那说明你根本没动到 background-image。
