#background-repeat

#介绍

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

#使用示例

css-apisrc/background-repeat/App.tsx

Code

预览

#语法

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

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

#取值

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

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

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

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

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

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

#形式定义

#形式语法

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

#与 Web 的区别

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

#兼容性