css3中background-repeat的 space和round属性

　

background-repeat

background-repeat space/round属性

2018-06-01 admin

1.容器空间小于图片

p {
    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.容器空间大于图片

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

相关阅读

如何向网页中嵌入谷歌英文地图

前言 百度地图目前不支持英文，所以如果想向网页中嵌入英文地图的话只能使用谷歌地图。（当然，想在国内从浏览器访问谷歌地图的大前提

10个超漂亮的CSS 3D特效

在油管上看到了10个超漂亮的CSS 3D特效，遂分享给大家，有写是css+JavaScript实现的。 3D Slicebox 在3D立方体上寻找图像幻灯片？查看

MySQL数据库中.frm和.myi和.myd文件是什么文件？作用是？

data目录下发现这三种文件，后辍名分别为-frm，myi，myd，请问分别代表什么文件？这三种文件各有什么作用？ 如果一个表同时有3个你上面说的

使用DBScan + Kmeans计算区域集聚和中心点

DBSCAN，英文全写为Density-based spatial clustering of applications with noise ，是在 1996 年由Martin Ester, Hans-Peter Kri

详解android:scaleType属性

Android:scaleType是控制图片如何resized/moved来匹对ImageView的size。 ImageView.ScaleType / android:scaleType值的意义区别：