在网页样式开发中，设置背景图后默认会出现重复平铺的情况，这是CSS背景属性的默认行为导致的，我们可以通过background repeat属性来调整背景图的重复规则，解决不需要重复的问题。
background repeat属性基础介绍
background repeat是CSS中用于定义背景图像是否以及如何重复的属性，属于background简写属性的子属性之一。如果不手动设置该属性，浏览器默认会给它赋值为repeat，也就是背景图会在水平和垂直两个方向同时重复，直到铺满整个元素区域。
属性的可选值
background repeat支持多个取值，不同取值对应不同的背景图重复效果：
- repeat：默认值，背景图在水平和垂直方向同时重复平铺
- repeat-x：背景图仅在水平方向重复，垂直方向不重复
- repeat-y：背景图仅在垂直方向重复，水平方向不重复
- no-repeat：背景图不重复，只显示一次
- space：背景图会尽可能重复，同时调整图片之间的间距，让图片均匀分布，不会裁剪图片，也不会出现不完整的图片
- round：背景图会尽可能重复，同时会缩放图片尺寸，让图片完整铺满元素区域，不会出现不完整的图片
解决背景图重复的实际用法
如果不需要背景图重复，只需要将background repeat设置为no-repeat即可，以下是具体的代码示例。
基础用法示例
首先我们准备一个宽高都为300px的div元素，给它设置一张尺寸为100px*100px的背景图，先看默认的效果：
/* 默认样式，背景图会重复 */
.box {
width: 300px;
height: 300px;
background-image: url('https://ipipp.com/bg.png');
/* 默认background-repeat为repeat，这里不写也会生效 */
}
此时背景图会在div内铺满3行3列，共9张完整的背景图。如果我们不希望重复，修改代码如下：
/* 禁止背景图重复 */
.box {
width: 300px;
height: 300px;
background-image: url('https://ipipp.com/bg.png');
background-repeat: no-repeat;
}
设置之后背景图只会在div的左上角显示一次，不会重复。如果希望背景图水平重复，垂直不重复，只需要把值改成repeat-x即可：
/* 仅水平方向重复背景图 */
.box {
width: 300px;
height: 300px;
background-image: url('https://ipipp.com/bg.png');
background-repeat: repeat-x;
}
简写方式的使用
background是多个背景相关属性的简写属性，我们可以把background-image和background-repeat写在同一个属性里，简化代码：
/* 简写方式设置背景图和不重复规则 */
.box {
width: 300px;
height: 300px;
background: url('https://ipipp.com/bg.png') no-repeat;
}
这种简写方式的顺序没有严格要求，浏览器可以正确识别对应的值，不过通常建议按照background-image、background-repeat、background-position、background-size的顺序书写，可读性更好。
特殊取值的使用场景
除了常用的no-repeat、repeat-x、repeat-y之外，space和round取值也有对应的使用场景。
space取值示例
当元素尺寸不是背景图尺寸的整数倍时，使用repeat会出现不完整的背景图，这时候可以用space取值让图片均匀分布：
/* 使用space让背景图均匀分布 */
.box {
width: 350px;
height: 350px;
background-image: url('https://ipipp.com/bg.png');
background-repeat: space;
}
此时背景图会在元素内尽可能重复，同时调整图片之间的间距，保证所有显示的背景图都是完整的，不会出现被裁剪的情况。
round取值示例
如果希望背景图完整铺满元素，同时不出现不完整的图片，可以使用round取值，浏览器会自动缩放背景图尺寸来适配元素：
/* 使用round让背景图缩放铺满元素 */
.box {
width: 350px;
height: 350px;
background-image: url('https://ipipp.com/bg.png');
background-repeat: round;
}
注意事项
在使用background repeat属性时，需要注意以下几点：
- 如果同时设置了background-size属性，round和space的取值效果可能会受到影响，因为background-size会改变背景图的实际显示尺寸
- 当元素有多个背景图时，每个背景图都可以单独设置background-repeat，用逗号分隔对应的值即可
- 如果需要兼容旧版本的浏览器，需要注意space和round取值在部分低版本浏览器中不支持，此时可以用repeat配合background-size来实现类似效果
通过合理设置background repeat属性，我们可以灵活控制背景图的显示效果，解决背景图重复的问题，也可以实现更多个性化的背景展示需求。
CSSbackground_repeat背景图background_image修改时间：2026-07-10 15:57:30