css - 条纹背景-硬边而不是模糊

我正在尝试为页面创建条纹背景。理想情况下，条纹需要具有坚实的边缘，但是当我尝试这样做时，边缘全部都有些模糊。我在这里想念什么吗？

.timeline {
width: 100%;
height: 1800px;
background-size: 1800px 1800px;
background-image: linear-gradient(0deg, #dbe4ea 25%, #f6f6f6 25%, #f6f6f6 50%, #dbe4ea 50%, #dbe4ea 75%, #f6f6f6 75%, #f6f6f6 100%);
}

<div class="timeline"></div>

最佳答案

.timeline {
width: 100%;
height: 1800px;
background: repeating-linear-gradient(
        0deg,
        #dbe4ea,
        #dbe4ea 100px,
        #f6f6f6 100px,
        #f6f6f6 200px);
}

<div class="timeline"></div>

希望这会有所帮助。我弄清楚了为什么它会变得模糊。这是因为您那里有75％。至少当我在拍摄时遇到麻烦时，这就是我发生的事情。