请教一个background-size问题

Question

我不太明白后面2个这种不规则条纹是怎么实现的，
在这里background-size的到底是怎么工作的？

#ct {
            background: hsl(20, 40%, 90%);
            background-image: linear-gradient(90deg, #fb3, 10px, transparent 0),
            linear-gradient(90deg, #ab4 20px, transparent 0),
            linear-gradient(90deg, #655 20px, transparent 0);
            background-size: 80px 100%;
        }

        #ct2 {

            background: hsl(20, 40%, 90%);
            background-image: linear-gradient(90deg, #fb3, 10px, transparent 0),
            linear-gradient(90deg, #ab4 20px, transparent 0),
            linear-gradient(90deg, #655 20px, transparent 0);
            background-size: 80px 100%, 60px 100%;
        }

        #ct3 {
            background: hsl(20, 40%, 90%);
            background-image: linear-gradient(90deg, #fb3, 10px, transparent 0),
            linear-gradient(90deg, #ab4 20px, transparent 0),
            linear-gradient(90deg, #655 20px, transparent 0);
            background-size: 80px 100%, 60px 100%, 40px 100%;
        }

        div {
            margin: 20px;
            width: 300px;
            height: 80px;
        }

JSBIN

Answer 1

就是重叠了，可以一层层看，无非就是叠上去了

另外这是 css-secret 的案例吧，可以看看那本书，挺好的