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

Question

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

.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>

Answer 1

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

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

希望这对您有所帮助。我想通了为什么它变得模糊。这是因为你有那 75%。至少当我解决问题时，我遇到了这种情况。