提问者:小点点

有没有办法确保所有的条纹在这个线性-渐变是相同的大小?[已关闭]


我有问题,使所有的条纹在这个渐变相同的大小;最下面的那个比其余的大。有什么办法可以防止这种情况发生吗?

null

#flag {
    width:1000px;
    height:600px;

    background-image:linear-gradient(to bottom, 
    #6E0E2E,
    #6E0E2E 16%,
    #2A0614 16%,
    #2A0614 32%,
    #BE1864 32%,
    #BE1864 48%,
    #00923C 48%,
    #00923C 64%,
    #1C562E 64%,
    #1C562E 80%,
    #00FECA 80%,
    #00FECA 96%
    );
}
<div id="flag"></div> <!-- flag -->

null


共1个答案

匿名用户

考虑使用calc()以获得精确的结果,并避免处理浮点数:

null

#flag {
    width:1000px;
    height:600px;
    background:
     linear-gradient(180deg, 
       #6E0E2E 0 calc(1*100%/6),
       #2A0614 0 calc(2*100%/6),
       #BE1864 0 calc(3*100%/6),
       #00923C 0 calc(4*100%/6),
       #1C562E 0 calc(5*100%/6),
       #00FECA 0 calc(6*100%/6));

}
<div id="flag">
</div> <!-- flag -->