上查看所有课程
CSS background-repeat 属性用于控制元素或网页中背景图像的重复行为。例如：
body {
background-image: url("avatar.png");
background-repeat: no-repeat;
}浏览器输出
在此，background-repeat 属性的 no-repeat 值可防止背景图像在 body 元素中重复自身。
CSS 背景重复语法
background-repeat 属性的语法是：
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;这里，
repeat：允许背景图像垂直和水平重复 (默认值)repeat-x：允许背景图像仅水平重复repeat-y：允许背景图像仅垂直重复no-repeat：停止背景图像重复自身space：允许背景图像在边框处重复而不被裁剪；空白平均分配在图像之间round：允许背景图像重复；图像会拉伸或压缩以填充可用空间initial：将属性值设置为默认值inherit：从其父元素继承此属性
我们将通过示例了解这些值如何与 background-repeat 属性一起使用。
示例 1：使用 Background-Repeat 重复
如果图像尺寸小于容器尺寸，背景图像默认会水平和垂直重复。
让我们来看一个 background-repeat 属性使用 repeat 值的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-repeat</title>
</head>
<body>
<!-- By default the background image repeats until the background area is filled -->
</body>
</html>body {
background-image: url("https://programiz.com.cn/blog/content/images/2020/11/intro-c-banner-1-1.png");
/* default value */
background-repeat: repeat;
}浏览器输出
示例 2：使用 Background-Repeat 的 Repeat-X
让我们来看一个 background-repeat 属性使用 repeat-x 值的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-repeat</title>
</head>
<body>
<!-- using the background image in body -->
</body>
</html>body {
background-image: url("https://programiz.com.cn/blog/content/images/2020/11/intro-c-banner-1-1.png");
/* repeats in horizontal direction */
background-repeat: repeat-x;
}浏览器输出
示例 3：使用 Background-Repeat 的 No-Repeat
让我们来看一个 background-repeat 属性使用 no-repeat 的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-repeat</title>
</head>
<body>
<!-- By default the background image repeats until the background area is filled -->
</body>
</html>body {
background-image: url("https://programiz.com.cn/blog/content/images/2020/11/intro-c-banner-1-1.png");
/* stops images from repeating itself */
background-repeat: no-repeat;
}浏览器输出
注意：如果背景图像尺寸大于背景区域，它将不会重复自身，因为图像太大，无法在可用空间中容纳多次。
示例 4：使用 Background-Repeat 的 Space
让我们来看一个 background-repeat 属性使用 space 值的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-repeat</title>
</head>
<body>
<!-- using the background image in body -->
</body>
</html>body {
height: 100vh;
background-image: url("https://programiz.com.cn/blog/content/images/2020/11/intro-c-banner-1-1.png");
background-repeat: space;
}浏览器输出
在上面的示例中，space 值允许背景图像在背景边缘处重复而不被裁剪。可用空间平均分配。
示例 5：使用 Background-Repeat 的 Round
让我们来看一个 background-repeat 属性使用 round 的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS background-repeat</title>
</head>
<body>
<!-- using the background image in body -->
</body>
</html>body {
height: 100vh;
background-image: url("https://programiz.com.cn/blog/content/images/2020/11/intro-c-banner-1-1.png");
background-repeat: round;
}浏览器输出
在上面的示例中，round 值会压缩背景图像以填充背景区域的可用空间。