CSS background-repeat 属性
更多“自己尝试”的例子见下文。
定义和用法
background-repeat 属性用于设置背景图片是否重复以及如何重复。
默认情况下，背景图片会同时在垂直和水平方向上重复。
提示：背景图片的位置由 background-position 属性决定。如果未指定 background-position，则图片始终放置在元素的左上角。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS 语法
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| 重复 | 背景图片同时在垂直和水平方向上重复。如果最后一个图片不适合，它将被裁剪。这是默认值。 | 演示 ❯ |
| repeat-x | 背景图片仅在水平方向上重复 | 演示 ❯ |
| repeat-y | 背景图片仅在垂直方向上重复 | 演示 ❯ |
| no-repeat | 不重复背景图片。图片将只显示一次 | 演示 ❯ |
| space | 背景图片会尽可能多地重复，而不会被裁剪。第一个和最后一个图片分别固定在元素的两侧，并且它们之间的空白会均匀分布。 | 演示 ❯ |
| round | 背景图片会重复并拉伸或压缩以填满空间（无间隙） | 演示 ❯ |
| initial | 将此属性设置为其默认值。阅读关于initial | |
| inherit | 从其父元素继承此属性。阅读关于inherit |
更多示例
示例
同时在垂直和水平方向上重复背景图片（这是默认值）
body {
background-image: url("paper.gif");
background-repeat: repeat;
}
自己动手试一试 »
示例
仅在水平方向上重复背景图片
body {
background-image: url("paper.gif");
background-repeat: repeat-x;
}
自己动手试一试 »
示例
不重复背景图片。图片将只显示一次
body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}
自己动手试一试 »
示例
使用 background-repeat: space 和 background-repeat: round
#example2 {
border: 2px solid black;
padding: 25px;
background: url("w3css.gif");
background-repeat: space;
}
#example3 {
border: 1px solid black;
padding: 25px;
background: url("w3css.gif");
background-repeat: round;
}
自己动手试一试 »
示例
使用不同的背景属性创建“英雄”图片
.hero-image {
background-image: url("photographer.jpg"); /* 使用的图片 */
background-color: #cccccc; /* 如果图片不可用时使用 */
height: 500px; /* 您必须指定高度 */
background-position: center; /* 居中图片 */
background-repeat: no-repeat; /* 不重复图片 */
background-size: cover; /* 将背景图片缩放到覆盖整个容器 */
}
自己动手试一试 »
相关页面
CSS 教程：CSS 背景
CSS 参考： background-position 属性
HTML DOM 参考：backgroundRepeat 属性
