必须直接修改 background-image 才能改变 Bootstrap 条纹进度条颜色，因其使用 base64 SVG 背景图而非纯色；改 background-color 无效，且需同步设置 animation 和 background-size 等属性确保条纹显示与动画正常。
直接改 background-image 才生效，不是 background-color
bootstrap 的条纹进度条（.progress-bar-striped）用的是 svg 背景图，不是纯色或渐变，所以给它设 background-color 完全没效果。你看到的条纹是 base64 编码的 svg 里 fill 属性决定的——必须替换整个 background-image 值。
常见错误：写 .progress-bar-striped { background-color: #28a745 !important; }，结果条纹还是灰色，因为底图没变。
- SVG 中有两个
<path></path>，它们的fill必须一致，否则条纹断裂或错位 - URL 编码中
#变成%23，比如%2328a745对应#28a745 - 深色背景上建议用浅色条纹（如
%23ffffff），否则看不见
.progress-bar-animated 动画失效？漏了 animation 声明
只换掉 background-image，但没补 animation，条纹就静止不动。Bootstrap 原生的 .progress-bar-animated 依赖特定 SVG 结构和 animation: progress-bar-stripes 1s linear infinite，自定义 SVG 后这套动画不会自动适配。
实操必须显式补上：
.progress-bar-striped.progress-bar-animated {
animation: progress-bar-stripes 1s linear infinite;
}
- 如果用了自定义渐变（
linear-gradient）代替 SVG，这个动画也无效，得自己写@keyframes+background-position - 检查开发者工具里
.progress-bar的 computedbackground-image，确认是否已更新为你写的 base64 - Bootstrap 5.3+ 已移除原生规则里的
!important，但老项目仍可能带，所以你的覆盖样式大概率还得加!important
用 linear-gradient 替代 SVG 更可控，但参数不能乱调
想绕过 base64 编码麻烦，可以直接用 linear-gradient 模拟条纹，例如：
.progress-bar-striped {
background-image: linear-gradient(90deg, #28a745 25%, transparent 25%, transparent 50%, #28a745 50%, #28a745 75%, transparent 75%, transparent);
}
- 角度
90deg是竖条纹，to right或0deg是横条纹 - 色标位置控制条纹粗细：每段
25%是标准 2px 条纹；改成10%就变密，50%就糊成一片 - 必须配合
background-size: 1rem 1rem（或具体像素值）才能稳定重复，否则在不同宽度容器里条纹会拉伸变形 - 这种写法下
.progress-bar-animated依然无效，要流动效果得另加animation和background-position
优先级不够？别硬刚，换选择器或加 !important
Bootstrap 4/5 默认 CSS 里 .progress-bar-striped 规则权重不高，但很多项目引入顺序靠前，或被其他框架样式覆盖。你写的 CSS 放在 Bootstrap 之后，却仍不生效，八成是优先级问题。
- 最省事：加
!important，这不是妥协，是和框架共存的常规操作 - 更稳妥：提高选择器权重，比如
.my-progress .progress-bar-striped，然后在 HTML 里写<div class="progress my-progress"> <li>千万别把自定义样式写在 Bootstrap 源码里——升级时一覆盖全丢</li> <li>用浏览器 DevTools 的 “Computed” 面板看最终生效的 <code>background-image是哪条规则提供的，比猜快得多
真正容易被忽略的是：条纹颜色改完后，
.progress 容器的底色（默认 #e9ecef）和 .progress-bar 的填充色（比如 bg-success）之间是否有足够对比度。尤其在低亮度屏幕或色弱用户场景下，绿色条纹+浅灰底可能根本看不清——这时候不是代码没生效，而是设计没到位。
