background-repeat

该属性指定图片是否重复出现平铺效果，以及方式。

语法

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: round;
background-repeat: space;
background-repeat: no-repeat;
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

值

值	描述
repeat	此关键词表示图像会重复覆盖整个背景图片的所在区域。如果最后一个图像大小不合适，那么就会被剪裁
repeat-x	此关键词表示图像会在x轴方向重复覆盖整个背景图片的所在区域。如果最后一个图像大小不合适，那么就会被剪裁
repeat-y	此关键词表示图像会在y轴方向重复覆盖整个背景图片的所在区域。如果最后一个图像大小不合适，那么就会被剪裁
space	此关键词表示图像会尽可能得重复，但是不会裁剪，第一个和最后一个图像会被固定在元素的相应地边上，同时空白会均匀地分布在图像之间。background-position 属性会被忽略，除非只有一个图像能被无裁剪的显示。只在一种情况下会发生裁剪，那就是图像太大了以至于没有足够的空间来完整地显示一个图像。
round	此关键词表示随着允许的空间在尺寸上的增长，被重复的图像将会伸展，直到有足够的空间来添加一个图像，当下一个图像被添加后，所有的当前的图像会被压缩来腾出空间。
no-repeat	此关键词表示图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖)。那个没有被重复的背景图像的位置是有 background-position 属性来决定。

例子

HTML

<div id="red">
</div>

CSS

#red {
     background-image:url("http://tse4.mm.bing.net/th?id=OIP.Mf677e381f4220ac2a878c923cf334aafo0&w=300&h=300&p=0&pid=1.7");
     background-repeat: no-repeat;
     background-position: center;
     height: 203px;
     border: solid 1px red;
}

执行结果

参考

相关链接

外部链接

background-repeat-MDN


跳至内容顶部