能否用CSS background-image repeating-linear-gradient实现5色条纹背景？

完全可以通过repeating-linear-gradient实现你需要的5色条纹，它支持定义多个颜色断点，并非只能局限于两种颜色。以下是针对你需求的具体实现方案：

核心实现代码 #

.stripe-pattern {
  width: 60px;
  /* 高度可根据实际需求调整 */
  height: 100%;
  background-image: repeating-linear-gradient(
    to right,
    /* 黑色条纹：0px 到 1px */
    #000 0 1px,
    /* 红色条纹：1px 到 2px */
    #f00 1px 2px,
    /* 绿色条纹：2px 到 3px */
    #0f0 2px 3px,
    /* 蓝色条纹：3px 到 4px */
    #00f 3px 4px,
    /* 白色间隔：4px 到 8px（宽度4px） */
    #fff 4px 8px
  );
}

代码说明 #

• 我们通过repeating-linear-gradient的多颜色区间定义，精准控制每段条纹的宽度：1px的彩色条纹依次排列，接着是4px的白色间隔，形成一个8px的基础重复单元。
• 由于你要求整体图案宽度为60px，这个8px的单元会自动重复填充至60px的宽度（最终会完整重复7次，剩余4px刚好是前4个彩色条纹的宽度，符合循环逻辑）。
• 如果需要替换为灰度，只需要将颜色值改为对应的灰度色值即可，比如把#f00换成#666，#0f0换成#999等。

替代方案（精确控制60px范围） #

如果需要完全精确控制60px内的每一段，避免重复单元的剩余部分，也可以直接用普通linear-gradient定义所有断点：

.stripe-pattern {
  width: 60px;
  height: 100%;
  background-image: linear-gradient(
    to right,
    #000 0 1px, #f00 1px 2px, #0f0 2px 3px, #00f 3px 4px, #fff 4px 8px,
    #000 8px 9px, #f00 9px 10px, #0f0 10px 11px, #00f 11px 12px, #fff 12px 16px,
    #000 16px 17px, #f00 17px 18px, #0f0 18px 19px, #00f 19px 20px, #fff 20px 24px,
    #000 24px 25px, #f00 25px 26px, #0f0 26px 27px, #00f 27px 28px, #fff 28px 32px,
    #000 32px 33px, #f00 33px 34px, #0f0 34px 35px, #00f 35px 36px, #fff 36px 40px,
    #000 40px 41px, #f00 41px 42px, #0f0 42px 43px, #00f 43px 44px, #fff 44px 48px,
    #000 48px 49px, #f00 49px 50px, #0f0 50px 51px, #00f 51px 52px, #fff 52px 56px,
    #000 56px 57px, #f00 57px 58px, #0f0 58px 59px, #00f 59px 60px
  );
}

这种方式虽然代码更长，但能完全匹配60px的宽度，没有多余的重复片段。

以上两种方案都不需要加载任何网络资源，纯CSS实现。

内容的提问来源于stack exchange，提问作者miras