图片怎么平铺 CSS：从基础语法到实战技巧完整指南

在网页设计中，“图片平铺”是一个非常常见的需求。比如给页面添加纹理背景、制作重复图案、实现横向或纵向的装饰线、让小图片铺满整个容器等，都离不开 CSS 的背景图片平铺功能。很多初学者在写 CSS 时会遇到这样的问题：图片如何铺满背景？为什么图片会重复？如何只横向平铺或纵向平铺？如何让图片不平铺而是拉伸覆盖？这些问题都可以通过 CSS 中与背景相关的属性来解决。

本文将围绕“图片怎么平铺 CSS”这一主题，系统讲解 CSS 图片平铺的基本用法、常见属性、实际案例以及开发中容易踩的坑，帮助你更清晰地掌握背景图片平铺的写法。

一、CSS 图片平铺的基本原理

在 CSS 中，通常使用 background-image 属性给元素设置背景图片。默认情况下，如果背景图片的尺寸小于元素的尺寸，浏览器会自动将图片进行重复平铺。

例如：

.box {
  width: 500px;
  height: 300px;
  background-image: url("bg.png");
}

如果 bg.png 是一张 50px × 50px 的小图片，那么它会在 .box 这个 500px × 300px 的区域中不断重复，直到铺满整个元素。

也就是说，CSS 背景图片默认就是平铺的。

默认效果相当于：

.box {
  background-repeat: repeat;
}

其中 background-repeat 就是控制背景图片是否平铺、如何平铺的核心属性。

二、background-repeat：控制图片平铺方式

background-repeat 是 CSS 中控制背景图片重复方式的属性。它常用的取值包括：

下面分别介绍这些用法。

三、图片横向和纵向都平铺

如果希望背景图片在水平方向和垂直方向都重复，可以使用 repeat。

.container {
  width: 800px;
  height: 400px;
  background-image: url("pattern.png");
  background-repeat: repeat;
}

这种方式适合用于纹理背景，比如纸张纹理、布料纹理、网格背景、小圆点背景等。

实际上，由于 repeat 是默认值，所以以下写法效果相同：

.container {
  background-image: url("pattern.png");
}

但是在实际开发中，建议显式写出：

background-repeat: repeat;

这样代码可读性更好，别人看到时能够马上知道你的意图。

四、图片只横向平铺：repeat-x

如果只希望图片在水平方向重复，也就是从左到右不断平铺，可以使用 repeat-x。

.header-line {
  height: 20px;
  background-image: url("line.png");
  background-repeat: repeat-x;
}

这种效果经常用于：

• 页面顶部横向装饰线；
• 分割线背景；
• 横向渐变背景；
• 导航栏背景；
• 边框纹理效果。

例如，一张宽度较小、高度为 10px 的横线纹理图，可以通过 repeat-x 在水平方向铺满整个元素。

完整示例：

.top-bar {
  width: 100%;
  height: 12px;
  background-image: url("top-line.png");
  background-repeat: repeat-x;
}

这样无论浏览器窗口多宽，背景图都会横向重复显示。

五、图片只纵向平铺：repeat-y

如果只希望图片在垂直方向重复，可以使用 repeat-y。

.sidebar {
  width: 200px;
  min-height: 600px;
  background-image: url("side-bg.png");
  background-repeat: repeat-y;
}

这种方式常用于侧边栏背景。例如一张宽度固定、高度较小的背景图片，可以纵向重复，形成完整的侧栏背景。

示例：

.sidebar {
  width: 240px;
  min-height: 800px;
  background-image: url("sidebar-pattern.png");
  background-repeat: repeat-y;
}

当侧边栏内容增加，高度变长时，背景图会继续向下重复，避免背景中断。

六、图片不平铺：no-repeat

有时候我们并不希望图片重复，而是只显示一次，比如页面上的装饰图标、banner 背景图、按钮图标等。这时可以使用 no-repeat。

.banner {
  width: 100%;
  height: 300px;
  background-image: url("banner.jpg");
  background-repeat: no-repeat;
}

不过，仅仅设置 no-repeat 可能会出现一个问题：图片只显示一次，但位置和大小并不一定符合预期。通常还需要配合 background-position 和 background-size 使用。

例如让图片居中显示：

.banner {
  background-image: url("banner.jpg");
  background-repeat: no-repeat;
  background-position: center center;
}

如果希望背景图覆盖整个容器，可以写：

.banner {
  background-image: url("banner.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

这是一种非常常见的背景图写法。

七、background-size：控制图片尺寸

虽然 background-repeat 控制的是图片是否重复，但在实际开发中，平铺效果是否自然，还与 background-size 有很大关系。

background-size 用于设置背景图片的尺寸。常见取值包括：

1. 使用原始尺寸平铺

.box {
  background-image: url("pattern.png");
  background-repeat: repeat;
  background-size: auto;
}

这是默认平铺方式，图片按照原始大小重复。

2. 指定尺寸后平铺

.box {
  background-image: url("pattern.png");
  background-repeat: repeat;
  background-size: 40px 40px;
}

这表示每个背景图片单元会被缩放到 40px × 40px，然后再进行平铺。

这种方式在制作网格、点阵、规则纹理背景时很有用。

3. 覆盖整个容器

.hero {
  background-image: url("hero.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

这里虽然不是严格意义上的“平铺”，但很多人搜索“图片怎么平铺 CSS”时，实际想问的是“图片怎么铺满背景”。如果你的目标是让一张大图铺满整个区域，而不是重复出现，就应该使用 background-size: cover，而不是 background-repeat: repeat。

八、background-position：控制背景图起始位置

当背景图片平铺时，第一张图片从哪里开始也很重要。这个位置由 background-position 控制。

.box {
  background-image: url("pattern.png");
  background-repeat: repeat;
  background-position: left top;
}

默认情况下，背景图从元素左上角开始平铺。

常见写法包括：

background-position: left top;
background-position: center center;
background-position: right bottom;
background-position: 20px 30px;
background-position: 50% 50%;

例如：

.card {
  background-image: url("dot.png");
  background-repeat: repeat;
  background-position: center;
}

如果图片是规则图案，修改起始位置可能会影响整体视觉效果。

九、使用 background 简写实现图片平铺

CSS 背景属性可以简写在 background 中。例如：

.box {
  background: url("pattern.png") repeat left top;
}

这相当于：

.box {
  background-image: url("pattern.png");
  background-repeat: repeat;
  background-position: left top;
}

如果还要设置背景颜色：

.box {
  background: #f5f5f5 url("pattern.png") repeat left top;
}

如果设置不重复、居中、覆盖：

.banner {
  background: url("banner.jpg") no-repeat center / cover;
}

需要注意，background-size 在简写中通常放在 / 后面：

background: url("bg.jpg") no-repeat center center / cover;

如果忘记 / cover 的写法，可能导致背景尺寸设置不生效。

十、图片平铺铺满整个页面

如果想让背景图片铺满整个网页，可以给 body 设置背景图。

body {
  margin: 0;
  background-image: url("pattern.png");
  background-repeat: repeat;
}

如果页面内容较少，但希望背景至少铺满整个浏览器高度，可以设置：

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background-image: url("pattern.png");
  background-repeat: repeat;
}

如果想让一张大图铺满整个屏幕，而不是重复平铺，可以写：

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

这两种写法的用途不同：

• 小纹理图铺满页面：使用 repeat；
• 大背景图铺满屏幕：使用 no-repeat + cover。

十一、让图片以网格形式平铺

在一些项目中，我们可能需要制作网格背景。例如使用一张小网格图片进行平铺：

.grid-bg {
  width: 100%;
  height: 500px;
  background-image: url("grid.png");
  background-repeat: repeat;
  background-size: 20px 20px;
}

不过，如果只是普通网格背景，也可以不使用图片，而是使用 CSS 渐变实现：

.grid-bg {
  width: 100%;
  height: 500px;
  background-image:
    linear-gradient(#ddd 1px, transparent 1px),
    linear-gradient(90deg, #ddd 1px, transparent 1px);
  background-size: 20px 20px;
}

这种方式的优点是：

• 不需要额外加载图片；
• 可以灵活修改颜色和间距；
• 在高清屏上更清晰；
• 减少 HTTP 请求。

因此，在现代网页开发中，如果平铺图案比较简单，可以优先考虑 CSS 渐变。

十二、多张背景图片同时平铺

CSS 支持一个元素设置多张背景图片，并分别控制它们的平铺方式。

.box {
  background-image: url("dots.png"), url("texture.png");
  background-repeat: repeat, repeat;
  background-position: left top, center center;
}

第一张图片会显示在上层，第二张图片显示在下层。

例如：

.card {
  background-image:
    url("noise.png"),
    linear-gradient(135deg, #ffffff, #f0f0f0);
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

这种写法可以用来实现更丰富的视觉效果，比如在渐变背景上叠加一层噪点纹理。

需要注意，多背景属性的值是一一对应的：

background-image: url("a.png"), url("b.png");
background-repeat: repeat-x, no-repeat;
background-size: auto, cover;

第一个 repeat-x 对应 a.png，第二个 no-repeat 对应 b.png。

十三、background-attachment：背景是否随页面滚动

图片平铺时，有时还需要控制背景是否跟随页面滚动。这可以使用 background-attachment。

body {
  background-image: url("pattern.png");
  background-repeat: repeat;
  background-attachment: fixed;
}

常见值：

例如固定背景效果：

.page {
  min-height: 2000px;
  background-image: url("texture.png");
  background-repeat: repeat;
  background-attachment: fixed;
}

不过需要注意，在部分移动端浏览器中，background-attachment: fixed 的表现可能不稳定，实际项目中要做好兼容测试。

十四、平铺图片与 img 标签的区别

很多人会问：图片平铺能不能用 标签实现？理论上可以通过多个 img 标签重复排列实现，但并不推荐。因为：

1. 是内容图片，适合展示有语义的图片；
2. 背景图片属于装饰效果，更适合使用 CSS；
3. 用 CSS 平铺更简单、性能更好；
4. CSS 背景不会影响文档结构；
5. 维护起来更加方便。

如果图片只是页面装饰、纹理或背景，应该使用：

background-image: url("xxx.png");

如果图片本身是文章内容、产品图、头像、相册图片，则应该使用：

简单来说：

• 装饰性图片：用 CSS background
• 内容性图片：用 img 标签

十五、常见问题：为什么图片没有平铺？

如果你设置了背景图片却没有平铺，可能有以下几个原因。

1. 图片路径错误

.box {
  background-image: url("../images/bg.png");
}

确认路径是否正确，尤其是 CSS 文件与图片文件之间的相对路径。

2. 元素没有宽高

背景图片显示在元素区域内，如果元素没有内容，也没有设置宽高，就可能看不到背景。

.box {
  width: 300px;
  height: 200px;
  background-image: url("bg.png");
  background-repeat: repeat;
}

3. 被其他背景属性覆盖

如果后面又写了 background 简写，可能会覆盖前面的设置。

.box {
  background-image: url("pattern.png");
  background-repeat: repeat;
  background: #fff;
}

上面代码中，最后的 background: #fff; 会清除背景图片设置。

正确写法：

.box {
  background: #fff url("pattern.png") repeat;
}

4. background-size 设置不合理

如果设置了：

background-size: cover;

图片可能会被放大到覆盖整个容器，看起来就不像平铺了。

如果想重复平铺，一般使用：

background-size: auto;

或指定较小尺寸：

background-size: 30px 30px;

5. 元素被其他元素遮挡

如果背景已经设置，但元素上方有其他不透明元素，也可能看不到背景。

十六、实战案例：小圆点背景平铺

下面我们实现一个常见的小圆点背景，不使用图片，直接用 CSS 渐变模拟平铺效果。

  
小圆点背景
  
这是一个使用 CSS 实现的平铺背景。

.dot-bg {
  width: 100%;
  min-height: 300px;
  padding: 40px;
  box-sizing: border-box;
  background-color: #fafafa;
  background-image: radial-gradient(#ccc 1px, transparent 1px);
  background-size: 16px 16px;
}

这里的关键是：

background-image: radial-gradient(#ccc 1px, transparent 1px);
background-size: 16px 16px;

它表示每 16px × 16px 的区域中生成一个小圆点，从而形成平铺点阵背景。

十七、实战案例：纹理背景图片平铺

如果你有一张纹理图片，比如 texture.png，可以这样写：

  
纹理背景
  
这是一段带有纹理背景的内容区域。

.texture-section {
  min-height: 400px;
  padding: 60px;
  color: #333;
  background-color: #f7f7f7;
  background-image: url("texture.png");
  background-repeat: repeat;
}

如果纹理图片过大，可以控制尺寸：

.texture-section {
  background-image: url("texture.png");
  background-repeat: repeat;
  background-size: 120px 120px;
}

十八、实战案例：横向平铺导航栏背景

.nav {
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  background-image: url("nav-bg.png");
  background-repeat: repeat-x;
}

.nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 20px;
}

这种写法可以让导航栏背景在水平方向自动延展，非常适合一些横向纹理或渐变切片背景。

十九、图片平铺的性能建议

虽然 CSS 图片平铺非常方便，但在实际项目中仍然要注意性能。

1. 图片体积要小

平铺图片通常应该是小图，例如几十像素大小的纹理图。如果图片过大，会增加加载时间。

2. 使用合适的格式

• 简单透明图案：可以使用 PNG；
• 复杂纹理：可以使用 JPG 或 WebP；
• 矢量图案：可以考虑 SVG；
• 现代项目：优先考虑 WebP 或 AVIF。

3. 简单图案优先用 CSS 渐变

例如条纹、网格、圆点等，不一定需要图片，CSS 就可以实现。

4. 避免过度复杂的背景

如果背景图案过于复杂，重复后可能会影响可读性，尤其是文字区域。

5. 注意高清屏显示效果

在 Retina 屏幕上，小图片可能会显得模糊。可以使用更高分辨率的图片，并通过 background-size 控制显示尺寸。

例如图片实际尺寸是 80px × 80px，但显示为 40px × 40px：

.box {
  background-image: url("pattern@2x.png");
  background-repeat: repeat;
  background-size: 40px 40px;
}

这样在高清屏上会更加清晰。

二十、总结：CSS 图片平铺怎么写？

CSS 图片平铺的核心属性是：

background-image: url("图片路径");
background-repeat: repeat;

最常见的几种写法如下：

1. 默认平铺

.box {
  background: url("bg.png") repeat;
}

2. 横向平铺

.box {
  background: url("bg.png") repeat-x;
}

3. 纵向平铺

.box {
  background: url("bg.png") repeat-y;
}

4. 不平铺

.box {
  background: url("bg.png") no-repeat;
}

5. 背景图铺满容器

.box {
  background: url("bg.jpg") no-repeat center / cover;
}

如果你的需求是“让小图重复铺满区域”，使用 background-repeat: repeat；如果你的需求是“让一张大图铺满整个容器”，使用 background-size: cover。两者看起来都像“铺满”，但实现原理完全不同。

掌握 background-image、background-repeat、background-size、background-position 这几个属性，就可以灵活实现绝大多数 CSS 图片平铺效果。