有什么方法可以确保此线性渐变上的所有条纹都相同? [英] Is there any way to make sure all the stripes on this linear-gradient are the same size?

问题描述

在将此渐变上的所有条纹设置为相同大小时，我遇到了问题；底部的一个大于其余的.

I am having issues with making all the stripes on this gradient the same size; the one on the bottom is bigger than the rest.

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

Is there any way to prevent this?

#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()以获得准确的结果并避免处理浮点数:

Consider the use of calc() to have an accurate result and avoid dealing with float number:

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

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

You can also do it with multiple background:

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

这篇关于有什么方法可以确保此线性渐变上的所有条纹都相同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！