有什么方法可以确保此线性渐变上的所有条纹都相同？

问题描述

我在使此渐变上的所有条纹都具有相同大小时遇到​​问题；底部的一个大于其余的。

有什么办法可以防止这种情况？

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

解决方法

请考虑使用calc()以获得准确的结果，并避免处理浮点数：

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

您也可以在多种背景下使用它：

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

}

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