在CSS中，背景图片的平铺行为由background-repeat属性控制。该属性决定了背景图像在元素背景区域内的重复排列方式。默认情况下，背景图片会在水平和垂直两个方向上重复平铺，直到铺满整个元素的可绘制区域。如果不了解这个默认值，经常会出现背景图意外重复很多次的情况。要精准控制平铺效果，需要掌握四个基础取值：repeat、repeat-x、repeat-y、no-repeat。接下来逐一解析它们的具体行为和适用场景。
background-repeat的四种基础取值
background-repeat属性的语法非常简单，直接写在背景图片声明之后即可。它的完整取值除了四个基础值，还有space和round两个扩展值。不过大多数浏览器和实际项目中用到最多的还是前四个。先看一个最基础的CSS规则：
/* 默认平铺：水平和垂直方向都重复 */
.box {
width: 300px;
height: 200px;
background-image: url('pattern.png');
background-repeat: repeat;
}
repeat是默认值，表示背景图像在水平方向和垂直方向都重复平铺。即使不写background-repeat: repeat，只要设置了背景图，它就会以这种方式渲染。这个值适合用作无缝拼接的纹理图案，例如点阵、格子、细小花纹等。如果图片本身带有明显的边框或阴影，重复后会形成网格状线条，可能不是想要的效果。
repeat-x表示只在水平方向上重复平铺，垂直方向不重复。这意味着背景图会从左到右铺满，但上下只显示一次。这个值常用于创建水平条纹、顶部装饰线、渐变横条等背景。比如一张宽度为1像素、高度为100像素的竖条图片，设置repeat-x后就能形成贯穿整个元素宽度的横线。示例代码如下：
/* 只在水平方向平铺 */
.horizontal-stripe {
height: 100px;
background-image: url('vertical-line.png');
background-repeat: repeat-x;
}
repeat-y则相反，只在垂直方向上重复平铺，水平方向不重复。这个值适合创建侧边栏装饰、垂直分隔线、背景纵向纹理等。例如一张宽度为20像素、高度为1像素的横条图片，设置repeat-y后就能在元素左侧形成一条细竖线。使用方式与repeat-x完全对称。
/* 只在垂直方向平铺 */
.vertical-bar {
width: 20px;
background-image: url('horizontal-line.png');
background-repeat: repeat-y;
}
no-repeat表示完全不重复平铺，背景图只在元素区域内显示一次。这个值是最直观的，常用于展示Logo、装饰图标、单个图片等。当背景图尺寸小于元素尺寸时，图片会定位在左上角（默认位置），其余部分透明或显示背景色。通常需要配合background-position来调整图片的对齐位置。下面是一个常见的用法：
/* 不平铺，只显示一次 */
.logo-box {
width: 200px;
height: 80px;
background-image: url('logo.png');
background-repeat: no-repeat;
background-position: center;
}
实际场景中的平铺技巧
掌握四个基础取值后，关键在于根据图片特性和设计需求选择合适的平铺方式。水平条纹是repeat-x的经典应用。例如要做一个顶部渐变横条，可以准备一张1像素宽、渐变高度的图片，然后设置background-repeat: repeat-x。这样无论元素宽度如何变化，横条都能完整覆盖。垂直侧边栏则适合repeat-y，尤其是当侧边栏高度不固定时，用一张窄图片纵向重复可以避免拉伸变形。
单个装饰图标或Logo必须使用no-repeat，否则会出现多个相同的图标。同时建议配合background-position进行精确定位，例如right top或center center。如果图片尺寸与元素尺寸比例不一致，还会涉及到background-size的调整，但它与平铺属性是独立的两套控制维度，后面会详细说明。
无缝拼接的纹理背景通常使用默认的repeat。要保证拼接后看不出接缝，图片的边缘必须完全吻合，即左边与右边像素一致、上边与下边像素一致。很多现成的纹理素材都是为无缝平铺设计的，可以直接使用。如果图片有可见边界，重复后会出现明显的方格线，这时要么换图，要么改用no-repeat配合其他布局方式。
另一个实用技巧是使用超小尺寸图片来实现大面积的纯色或渐变效果。例如用一个1x1像素的纯色图片平铺，可以模拟任何背景色，但性能不如直接使用background-color。只有需要特殊纹理时才用图片平铺，否则应优先使用纯色背景。
常见问题与注意事项
图片尺寸是影响平铺效果的首要因素。如果背景图原始尺寸比元素大得多，即使设置no-repeat，也可能只显示图片的一部分，超出元素的部分会被裁剪。此时需要结合background-size来缩放图片。但要注意，一旦设置了background-size，它会影响图片的显示大小，进而改变平铺时的重复单元。例如设置background-size: 50px 50px后，即使使用repeat，也是按50x50的大小进行重复，而不是原始尺寸。
平铺的起始位置由background-position决定。默认从元素左上角开始平铺，但可以通过background-position改变起点。例如background-position: 20px 30px会让图片从距离左边20像素、上边30像素的位置开始平铺。这个特性可以用来制作偏移的网格效果，不过日常使用中较少调整平铺起点。
性能方面，小尺寸图片平铺的开销通常小于一张大图。浏览器只需要解码一次小图，然后通过GPU或CPU进行重复绘制。然而如果平铺次数非常多（比如几百次），也可能带来额外的合成开销。相比之下，一张与元素尺寸完全匹配的大图配合no-repeat可能更高效，但图片文件本身更大。实际项目中需要根据图片类型和元素尺寸做权衡。
浏览器兼容性方面，四个基础值的支持度完全一致，从CSS1时代就存在，不用担心兼容问题。但扩展值space和round在早期IE中不支持。如果需要兼容老旧浏览器，应避免使用这两个值，或者提供基础值作为回退方案。
扩展取值：space和round
虽然题目重点讨论四种基础平铺方式，但CSS规范中还定义了space和round两个取值，它们在某些场景下非常有用。space表示背景图像重复时，在图像之间均匀添加空白，使第一张和最后一张图片分别贴合元素的两端。如果剩余的空白不足以再放下一张完整图片，空白会被均匀分配到各图片之间。这个值适合制作均匀分布的点阵或图标排列。
round则不同，它会拉伸或压缩背景图像，使得重复次数为整数，并且每张图片正好填满元素区域，不会出现裁剪。当元素尺寸不是图片尺寸的整数倍时，round会自动调整图片大小，确保没有半张图片出现。例如元素宽度为310像素，图片宽度为100像素，使用repeat: round时，浏览器会把图片宽度缩放到约103.33像素，从而刚好放置3张。这两个值虽然功能强大，但因兼容性和视觉控制难度，实际项目中仍以四种基础值为主。
值得注意的是，space和round需要同时应用于水平和垂直方向，不能像repeat-x那样独立控制横竖。如果需要更复杂的平铺行为，可以组合使用background-repeat的两个值，例如background-repeat: repeat space，第一个值用于水平方向，第二个用于垂直方向。这个双值语法对所有取值都适用，而且现代浏览器均支持。
总结一下，图片平铺的核心就是background-repeat属性，四个基础值分别对应全铺、横铺、竖铺和不铺。理解每个值的渲染逻辑，再结合图片尺寸、背景定位和缩放属性，就能自如应对各种背景图需求。建议在开发调试时先用简单的色块图片验证平铺行为，再替换为实际设计图，可以避免很多意外效果。
CSS图片平铺background-repeat平铺方式修改时间：2026-10-07 02:07:12