导航分类

机器学习教程

CSS background-position-y 属性 CSS background-size 属性

CSS background-repeat 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

background-repeat属性用于设置背景图像是否重复以及如何重复。

background-repeat值为space或round时，如果背景图像太大而无法完整显示，它们会被裁剪。

默认值：	repeat
继承性：	否
可动画性：	否。请参阅：可动画属性。
版本：	CSS1
JavaScript 语法：	object.style.backgroundRepeat="repeat-x"

常用的实例

接下来通过多个实例演示background-repeat属性的用法，来深化您对background-repeat属性的理解。

1. 在垂直方向重复背景图像

实例代码运行代码

复制

.example {
    background-image:url('/uploads/20250507/deer.png');
    background-repeat: repeat-y;
}

2. 在水平方向重复背景图像

实例代码运行代码

复制

.example {
    background-image:url('/uploads/20250507/deer.png');
    background-repeat: repeat-x;
}

3. 仅显示一次背景图像

实例代码运行代码

复制

.example {
    background-image:url('/uploads/20250507/deer.png');
    background-repeat: no-repeat;
}

CSS 语法

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

属性值

值	描述
`repeat`	默认值。背景图像将在垂直方向和水平方向重复。
`repeat-x`	背景图像将在水平方向重复。
`repeat-y`	背景图像将在垂直方向重复。
`no-repeat`	背景图像将仅显示一次。
`space`	尽可能多地重复背景图像而不剪切。第一个和最后一个图像被固定在元素的两侧，空白在图像之间均匀分布。
`round`	重复并压缩或拉伸背景图像以填充空间（无间隙）。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。

浏览器支持

表中的数字指定了完全支持background-repeat属性的第一个浏览器版本。


Chrome	IE / Edge	Firefox	Safari	Opera
1.0	4.0	1.0	1.0	3.5

CSS background-repeat 属性

定义和用法

常用的实例

1. 在垂直方向重复背景图像

2. 在水平方向重复背景图像

3. 仅显示一次背景图像

CSS 语法

属性值

浏览器支持

相关页面

CSS 参考手册

CSS 属性

CSS background-repeat 属性

定义和用法

常用的实例

1. 在垂直方向重复背景图像

2. 在水平方向重复背景图像

3. 仅显示一次背景图像

CSS 语法

属性值

浏览器支持

相关页面

CSS 参考手册

CSS 属性

意见反馈

反馈提交成功