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

时间:2018-10-30 12:57:05

标签: 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>

1 个答案:

答案 0 :(得分:0)

.timeline {
width: 100%;
height: 1800px;
background: repeating-linear-gradient( 
        0deg,
        #dbe4ea,
        #dbe4ea 100px,
        #f6f6f6 100px,
        #f6f6f6 200px);
}
<div class="timeline"></div>

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