CSS background-repeat 属性
下面还有更多“试试看”示例。
定义和用法
The background-repeat 属性设置背景图像是否/如何重复。
默认情况下，background-image 垂直和水平都会重复。
提示： 背景图像根据 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 | 背景图像在垂直和水平方向上重复。 如果图像不适合，最后一个图像将被剪切。 这是默认值 | 演示 ❯ |
| repeat-x | 背景图像仅在水平方向上重复 | 演示 ❯ |
| repeat-y | 背景图像仅在垂直方向上重复 | 演示 ❯ |
| no-repeat | 背景图像不重复。图像只显示一次 | 演示 ❯ |
| space | 背景图像尽可能重复，不会被剪切。 第一个和最后一个图像固定在元素的两侧，空白在图像之间均匀分布 | 演示 ❯ |
| round | 背景图像被重复并挤压或拉伸以填充空间（无间隙） | 演示 ❯ |
| initial | 将此属性设置为其默认值。 了解initial | |
| inherit | 从其父元素继承此属性。 了解inherit |
更多示例
示例
不要重复背景图像。图像只显示一次
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 属性
