background-repeat space/round属性-白红宇

background-repeat space/round属性

阅读量：6417 次

发布时间：2019-06-23

本文共 668 字，大约阅读时间需要 2 分钟。

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