目录

CSS background-repeat 属性

❮上一节完整的CSS参考下一节❯

示例

仅垂直重复背景图片：

body {
background-image: url("paper.gif");
background-repeat: repeat-y;
}

亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个background-repeat属性设置背景图片是否/如何重复。

默认情况下，一个背景图垂直和水平重复。

提示：背景图片根据背景位置属性。如果未指定背景位置，则图片始终放置在元素的左上角。

展示演示❯

默认值：	重复
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS1
JavaScript 语法：	对象.style.backgroundRepeat="repeat-x"尝试一下

浏览器支持

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

Property
background-repeat	1.0	4.0	1.0	1.0	3.5

CSS 语法

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

属性值

Value	Description	Demo
repeat	The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default	Demo ❯
repeat-x	The background image is repeated only horizontally	Demo ❯
repeat-y	The background image is repeated only vertically	Demo ❯
no-repeat	The background-image is not repeated. The image will only be shown once	Demo ❯
space	The background-image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images	Demo ❯
round	The background-image is repeated and squished or stretched to fill the space (no gaps)	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about 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;
}

亲自试一试 »

示例

使用背景重复：空间和背景重复：圆形：

#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" 图片：

.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

亲自试一试 »

相关页面

CSS教程：CSS 背景

CSS 参考：背景位置属性

HTML DOM 参考：背景重复属性

❮上一节完整的CSS参考下一节❯