background-repeat

介绍

background-repeat属性定义背景图background-image(./background-image)的重复方式。背景图像可以沿着水平、垂直，两个方向重复。

取值

• 默认值repeat
  图像会按需重复来覆盖图片所在的区域。最后一个图像可能会被裁剪。

• no-repeat
  图像不会被重复(因为背景图片所在的区域可能没有被完全覆盖)。图片的位置由background-position(./background-position)属性来决定。

• repeat-x
  图像沿水平方向重复。

• repeat-y
  图像沿垂直方向重复。

• space
  图像会尽可能得重复，但不会被裁剪。空白区域会被均匀的分布在图像之间。background-position(./background-position)属性会被忽略。

• round
  图像会尽可能的重复。为了填充空白区域，图片可能会被拉伸或裁剪。

• 兼容性

  • 1.6 之前的版本，background-repeat的默认值是no-repeat，1.6 之后与浏览器对齐，默认值改为repeat。
  • 1.6 之前的版本，不支持space和round关键字。
  • 1.6 之后的版本，解析部分支持space和round关键字，但并没有实现渲染行为，实际的渲染行为与repeat一致。

样例：

/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 双值语法: 水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

标准化语法

<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}

与 Web 的区别

• 没有实现space和round的渲染行为。
• 不支持全局关键字inherit