background-size: 50% 50%, 50% 50%，如何与background-image对应的？

Question

div {
    position: relative;
     
    &::after {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-repeat: no-repeat;
        background-size: 50% 50%, 50% 50%;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
    }
}

background-size只有两个部分，如何与background-image对应的？

Answer 1

background-size如果数量不足，会循环自身补齐，比如

1. background-size的值为 a，补齐以后就是a,a,a,a (循环a)
2. background-size的值为 a,b，补齐以后就是a,b,a,b (循环a,b)
3. background-size的值为 a,b,c，补齐以后就是a,b,c,a (循环a,b,c)
4. background-size的值为 a,b,c,b，无需补齐

所以这个问题的结果是 background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;，但是由于是相同的，所以写一个更好，也就是 background-size: 50% 50%