progress标签不支持background-image直接生效，因其为替换元素，需用伪元素（WebKit/Blink）或自定义结构（兼容Firefox）实现条纹效果，并确保value/max为合法数字且更新节流。
progress 标签不支持 background-image 直接生效
直接给 <progress> 元素设置 background-image CSS 属性，绝大多数情况下完全无效——不是“没效果”，而是浏览器压根不解析该样式。这是因为 <progress> 是替换元素（replaced element），其内部渲染由 UA（用户代理）控制，外部 CSS 的 background-image 无法穿透到它的填充区域。
常见错误是写成这样却期待条纹动起来：
progress {
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 20px 20px;
}
这段代码对 <progress> 本身不起作用，只会影响它的容器（如果有的话），但不会变成条纹进度填充。
真能实现条纹效果的两种可靠路径
必须绕过原生渲染机制，用标准 CSS 可控方式模拟。核心思路只有两个：一是用伪元素覆盖，二是用绝对定位遮罩层。
立即学习“前端免费学习笔记（深入）”；
- WebKit/Blink 浏览器（Chrome、Edge、Safari）可用
::-webkit-progress-value伪元素 +background-image，但需先重置外观：-webkit-appearance: none，否则伪元素不生效 - Firefox 需单独处理
::-moz-progress-bar，且它不支持background-image（仅支持纯色），所以 Firefox 下条纹必须换方案 - 最兼容的做法是放弃伪元素，改用
<div class="progress-container"><div class="progress-fill"></div></div>结构，把条纹背景设在.progress-fill上，再用 JS 控制其width
示例（兼顾 Chrome 和 Firefox）：
.progress-container {
height: 20px;
background-color: #eee;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #4CAF50 25%, transparent 25%),
linear-gradient(90deg, transparent 50%, #4CAF50 50%),
linear-gradient(90deg, #4CAF50 75%, transparent 75%),
linear-gradient(90deg, transparent 100%, #4CAF50 100%);
background-size: 20px 100%;
background-position: 0 0;
animation: stripe-move 2s linear infinite;
}
@keyframes stripe-move {
0% { background-position: 0 0; }
100% { background-position: 20px 0; }
}
value 写字符串或未设 max 会导致条纹根本不出现在进度区
即使样式写对了，<progress value="70" max="100"> 中的 value 若是字符串（如 "70"）、或 max 缺失/为负数/为 0，浏览器会退回到不确定状态（indeterminate），此时 ::-webkit-progress-value 伪元素压根不创建，你设的所有填充样式都白搭。
检查要点：
- 确保
value和max都是数字类型（可用Number()转换） - 确保
0 ≤ value ≤ max，否则进度条可能卡死或跳变 - DOM 渲染后可用
el.value和el.max打印验证，别只看 HTML 源码
JS 更新频率过高会让条纹动画卡顿甚至消失
用 fetch 或 XMLHttpRequest.upload.onprogress 实时更新 progress.value 时，若每毫秒都设一次值，WebKit 会丢帧，导致 ::-webkit-progress-value 的动画卡住；而自定义 div 方案中，高频 width 设置也会触发大量重排。
安全做法：
- 加节流（throttle），例如限制每 50ms 最多更新一次
- 避免用
requestAnimationFrame驱动进度更新——它适合动画，不适合数据驱动的进度同步 - 上传类场景优先用
loaded / total计算整数百分比，再映射到max=100，减少浮点误差累积
真正难的不是画出条纹，而是让条纹在各种浏览器里稳定、可访问、不卡顿地跟着真实任务走——这要求你始终把 value/max 的合法性校验和更新节奏控制放在样式之前。
