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

【问题标题】：Striped background - hard edges instead of blurred条纹背景 - 硬边而不是模糊
【发布时间】：2018-10-30 21:28:18
【问题描述】：

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

.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%);
}

&lt;div class="timeline"&gt;&lt;/div&gt;

【问题讨论】：

与stackoverflow.com/questions/26652661/…有关吗？
试试这个：背景：repeating-linear-gradient(0deg,#dbe4ea 0%,#dbe4ea 20%,#f6f6f6 20%,#f6f6f6 40%);

标签： css

【解决方案1】：

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

&lt;div class="timeline"&gt;&lt;/div&gt;

希望这会有所帮助。我弄清楚为什么它会变得模糊。这是因为你有 75% 在那里。至少当我遇到问题时，这就是发生在我身上的事情。

【讨论】：