定义和用法
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 教程:CSS 背景
CSS 参考手册:background-image 属性
CSS 参考手册:background-position 属性
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
95
章节
89
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈