CSS background-repeat 属性
下面有更多实例。
"背景重复" 提示: 根据"背景位置"属性放置背景图像。如果未指定背景位置，则图像始终放置在元素的左上角。
定义和用法
background-repeat 属性设置背景图像是否重复/如何重复。
默认情况下，background-image 背景图像会垂直和水平重复。
提示: 根据 background-position 属性放置背景图像。如果未指定背景位置，则图像始终放置在元素的左上角。
| 默认值: | repeat |
|---|---|
| 继承性: | no |
| 支持动画: | no. 阅读有关动画的信息 |
| 版本: | CSS1 |
| JavaScript 语法: | object.style.backgroundRepeat="repeat-x" 测试一下 |
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
注释: IE8以及更早版本的浏览器不支持多个背景图像在一个元素。
语法
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: repeat;
}
亲自试一试 »
background-image: url("paper.gif");
background-repeat: repeat;
}
实例
不要重复背景图像。图像将仅显示一次：
body
{
background-image: url("paper.gif");
background-repeat: no-repeat;
}
亲自试一试 »
background-image: url("paper.gif");
background-repeat: no-repeat;
}
实例
使用背景重复: space and background-repeat: round:
#example2 {
border: 2px solid black;
padding: 25px;
background: url("btcss.gif");
background-repeat: space;
}
#example3 {
border: 1px solid black;
padding: 25px;
background: url("btcss.gif");
background-repeat: round;
}
亲自试一试 »
border: 2px solid black;
padding: 25px;
background: url("btcss.gif");
background-repeat: space;
}
#example3 {
border: 1px solid black;
padding: 25px;
background: url("btcss.gif");
background-repeat: round;
}
实例
使用不同的背景属性创建 "hero" 图像：
.hero-image {
background-image: url("photographer.jpg"); /* 使用的图像 */
background-color: #cccccc; /* 图像不可用时使用 */
height: 500px; /* 您必须设置指定的高度 */
background-position: center; /* 居中图像 */
background-repeat: no-repeat; /* 不要重复图像 */
background-size: cover; /* 调整背景图像的大小以覆盖整个容器 */
}
亲自试一试 »
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 属性
