background-repeat

语法

  • background-repeat:<repeat-style> [ , <repeat-style> ]*
  • <repeat-style> = repeat-x | repeat-y | [repeat | no-repeat | space</i> | round]{1,2}
  • 默认值:repeat
  • 适用于:所有元素
  • 继承性:无
  • 动画性:否
  • 计算值:指定值

取值

  • repeat-x:背景图像在横向上平铺
  • repeat-y:背景图像在纵向上平铺
  • repeat:背景图像在横向和纵向平铺
  • no-repeat:背景图像不平铺
  • round:背景图像自动缩放直到适应且填充满整个容器。(CSS3)
  • space:背景图像以相同的间距平铺且填充满整个容器或某个方向。(CSS3)

说明

设置或检索对象的背景图像如何铺排填充。必须先指定 <' background-image '> 属性。

  • 允许提供2个参数,如果提供全部2个参数,第1个用于横向,第二个用于纵向。
  • 如果只提供1个参数,则用于横向和纵向。特殊值repeat-x和repeat-y除外,因为repeat-x相当于repeat no-repeat,repeat-y相当于no-repeat repeat,即其实repeat-x和repeat-y等价于提供了2个参数值
  • 对应的脚本特性为backgroundRepeat。

兼容性

Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0+ 2.0+ 4.0+ 3.1+ 15.0+ 3.2+ 2.1+ 18.0+
2个参数值 6.0-8.0 2.0-12.0
9.0+ 13.0+
space | round 6.0-8.0 2.0-38.0
9.0+

示例


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<style>
.test {
    padding-top: 200px;
    background-image: url(skin/p_103x196_1.jpg);
    background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="test">横向平铺背景图片</div>
</body>
</html>