background-repeat space/round属性

2018-06-01 admin

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次，否则拉伸已经重复的背景图