在网页样式开发中，给元素添加背景图片是非常常见的需求，但浏览器默认会将背景图片在水平和垂直方向同时平铺，直到填满整个元素区域，这往往不符合我们的设计需求。要设置图片不重复，核心是使用CSS的background-repeat属性。
background-repeat属性介绍
background-repeat是CSS中用于控制背景图片重复方式的属性，它的默认值为repeat，也就是图片会在水平和垂直方向同时重复。要设置图片不重复，只需要将该属性的值设置为no-repeat即可。
除了no-repeat之外，background-repeat还有以下几个常用取值：
- repeat：默认值，背景图片在水平和垂直方向都重复平铺
- repeat-x：背景图片只在水平方向重复平铺
- repeat-y：背景图片只在垂直方向重复平铺
- no-repeat：背景图片不重复，只显示一次
- space：背景图片平铺时，图片之间会均匀分布空白，不会裁剪图片
- round：背景图片平铺时，会缩放图片以适应元素区域，不会留下空白
设置图片不重复的基础用法
我们可以直接在元素的样式中声明background-repeat: no-repeat，同时配合background-image属性指定背景图片的路径，就可以实现图片不重复的效果。
下面是一个简单的示例，给一个div元素设置不重复的背景图片：
/* 定义一个宽高200px的容器 */
.img-box {
width: 200px;
height: 200px;
/* 设置背景图片路径 */
background-image: url('https://ipipp.com/bg.png');
/* 设置图片不重复 */
background-repeat: no-repeat;
/* 可选：设置背景图片的位置，这里设置为左上角对齐 */
background-position: left top;
/* 可选：设置背景图片大小，这里保持原图尺寸 */
background-size: auto;
/* 给容器加个边框方便观察效果 */
border: 1px solid #ccc;
}
对应的HTML结构如下：
<div class="img-box"></div>
运行上面的代码后，div元素的背景图片只会显示一次，不会在容器内平铺。
使用background简写属性设置
在实际开发中，我们也可以使用background简写属性来一次性设置背景相关的多个属性，这样代码会更简洁。background简写属性的语法中，background-repeat的取值放在background-position之后，background-size之前，用/分隔background-size和前面的属性。
使用简写属性实现图片不重复的示例如下：
/* 简写方式设置背景，图片不重复 */
.short-bg {
width: 300px;
height: 300px;
/* 顺序：背景图片 重复方式 位置/大小 背景颜色 */
background: url('https://ipipp.com/logo.png') no-repeat center center/cover #f5f5f5;
border: 1px solid #eee;
}
上面的代码中，no-repeat就是设置图片不重复的参数，center center是背景图片的位置，cover是背景图片的尺寸，#f5f5f5是背景颜色。
不同场景下的使用注意事项
背景图片尺寸适配
当设置图片不重复后，如果图片尺寸小于元素尺寸，图片只会显示在指定的位置，不会填满整个元素。这时候可以配合background-size属性调整图片尺寸，比如设置background-size: cover可以让图片等比缩放直到填满整个元素，可能会裁剪部分图片；设置background-size: contain可以让图片等比缩放直到完整显示在元素内，可能会留下空白。
多背景图片的设置
如果需要给一个元素设置多张背景图片，并且都不重复，可以在background-image中用逗号分隔多个图片路径，同时在background-repeat中对应设置多个no-repeat，数量要和图片数量一致。
多背景图片不重复的示例如下：
.multi-bg {
width: 400px;
height: 400px;
/* 两张背景图片，用逗号分隔 */
background-image: url('https://ipipp.com/bg1.png'), url('https://ipipp.com/bg2.png');
/* 两张图片都不重复，用逗号分隔对应取值 */
background-repeat: no-repeat, no-repeat;
/* 两张图片的位置分别设置 */
background-position: left top, right bottom;
border: 1px solid #ddd;
}
常见问题解答
问：设置了no-repeat但图片还是重复了怎么办？
答：首先检查是否有其他CSS规则覆盖了当前的background-repeat属性，比如更具体的选择器或者内联样式。其次检查是否使用了background简写属性，简写属性会重置所有未显式声明的背景相关属性，如果简写时没有写no-repeat，就会使用默认的repeat值。
问：设置图片不重复后，如何让图片居中显示？
答：可以配合background-position属性，设置background-position: center center，就可以让不重复的背景图片在元素中水平和垂直都居中显示。
总结：css设置图片不重复的核心是使用background-repeat: no-repeat属性，既可以单独声明，也可以放在background简写属性中使用。根据实际需求配合background-position和background-size属性，可以灵活控制背景图片的显示效果。
CSSbackground-repeatbackground_image图片样式修改时间：2026-07-17 10:54:29