background-repeat space/round屬性

1.容器空間小於圖片

div {
    width: 200px;
    height: 200px;
    border: solid 1px red;
    background-color: #fff3d4;
    background-size: 300px;
    background-image: url(./moon.jpg);
}
.test1 {
    background-repeat: space;
}
.test2 {
    background-repeat: round;    
}

space 背景圖不會產生縮放，會被裁切
round 縮放背景圖至容器大小（非等比例縮放）

（上面爲space下圖爲round）

2.容器空間大於圖片

div {
    width: 200px;
    height: 100px;
    border: solid 1px red;
    background-color: #fff3d4;
    background-size: 60px;
    background-image: url(./moon.jpg);
}
.test1 {
    background-repeat: space;
}
.test2 {
    background-repeat: round;    
}

space 在不縮放的前提下儘量多的重複圖片
round 充分利用容器空間，重複n次以後（x/y軸方向）若是剩餘空間大於等於imgWidth*50%則重複第n+1次，不然拉伸已經重複的背景圖