Html 每x%生成更多线条时，CSS渐变开始褪色

我正在尝试创建一个梯度，它只是每x%显示一条红线

当我开始生成更多的线条时，红色条纹似乎开始褪色为白色。

.four stripes

选择器提供了一个很好的结果，但是当我再添加一条红线时，就像在

more stripes

中一样，所有东西都开始变得模糊。。。 见：

div{
宽度：1200px；
高度：20px；
}
.四条条纹{
背景：线性梯度（90度，红色0.00%0.27%，透明0.27%1.92%，红色1.92%2.19%，透明2.19%3.84%，红色3.84%4.11%，透明4.11%5.75%，红色5.75%6.03%，透明6.03%100%）；
}
.更多条纹{
背景：线性梯度（90度，红色0.00%0.27%，透明0.27%1.92%，红色1.92%2.19%，透明2.19%3.84%，红色3.84%4.11%，透明4.11%5.75%，红色5.75%6.03%，透明6.03%7.67%，红色7.67%7.95%，透明7.95%100%）
}

---

使渐变变得容易，并调整

背景大小

div{
高度：20px；
保证金：5px；
}
.四条条纹{
背景：
线性渐变（向右，红色5px，透明0 100%）
左/25%100%；
}
.更多条纹{
背景：
线性渐变（向右，红色5px，透明0 100%）
左/15%100%；
}

使用“重复线性渐变”可能会有所帮助

div{
宽度：1200px；
高度：20px；
}
.更多条纹{
背景：重复线性渐变(
90度，
红色
红色5px，
透明5px，
透明20px
);
}

您需要在此处发布问题，而不是指向您的网站或任何第三方网站的链接。