CSS 图片怎么平铺：从背景图平铺到实际项目应用详解

在网页开发中，“图片平铺”是一个非常常见的需求。比如页面背景使用一张小纹理图不断重复铺满整个屏幕；某个按钮背景使用渐变纹理重复显示；或者在卡片、横幅、导航栏中让背景图只沿水平方向或垂直方向重复。CSS 提供了非常方便的属性来控制图片是否平铺、如何平铺以及平铺的位置和尺寸。

本文将围绕 “CSS 图片怎么平铺” 这个问题进行详细讲解，包括 background-repeat 的基本用法、水平/垂直平铺、禁止平铺、背景图尺寸控制、背景图定位、多个背景图平铺，以及一些实际开发中的注意事项。

一、CSS 图片平铺主要用什么属性？

CSS 中控制背景图片平铺的核心属性是：

background-repeat

它通常和 background-image 一起使用。

最基础的写法如下：

div {
  background-image: url("bg.png");
  background-repeat: repeat;
}

其中：

• background-image 用于设置背景图片；
• background-repeat 用于控制背景图片是否重复显示，也就是是否平铺。

默认情况下，如果只设置背景图片而不设置 background-repeat，浏览器会默认让背景图 水平和垂直方向都重复平铺。

也就是说下面两段代码效果基本一致：

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

等价于：

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

二、CSS 图片平铺的基本语法

background-repeat 常见取值如下：

background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: space;
background-repeat: round;

这些值的含义分别是：

在实际项目中，最常用的是前四个：repeat、no-repeat、repeat-x、repeat-y。

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

如果希望一张背景图在元素中横向和纵向都不断重复，可以使用：

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

这表示 pattern.png 会从元素左上角开始，一直向右、向下重复，直到铺满整个 .box 区域。

这种方式非常适合用于：

• 网页整体背景纹理；
• 卡片背景纹理；
• 游戏界面背景；
• 装饰性图案；
• 小尺寸无缝贴图。

例如：

body {
  background-image: url("texture.png");
  background-repeat: repeat;
}

这样就可以让整个页面背景使用一张小图无限平铺。

使用平铺背景的优势

在早期网页设计中，背景图平铺非常常见。因为使用一张很小的纹理图，可以铺满整个页面，既节省图片体积，也能带来比较丰富的视觉效果。

比如一张 20px × 20px 的纹理图片，大小可能只有几 KB，但通过 CSS 平铺后，可以覆盖整个屏幕。相比直接使用一张大背景图，加载速度更快，也更节省带宽。

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

如果只希望图片在水平方向重复，而垂直方向只显示一次，可以使用：

.header {
  height: 80px;
  background-image: url("nav-bg.png");
  background-repeat: repeat-x;
}

repeat-x 表示背景图只沿 X 轴方向平铺，也就是从左到右重复。

这种用法常见于：

• 顶部导航栏背景；
• 按钮横向渐变背景；
• 横幅装饰线；
• 页面顶部阴影；
• 表格标题背景。

例如，一个导航栏需要一张横向重复的背景纹理：

.nav {
  height: 60px;
  background-image: url("nav-texture.png");
  background-repeat: repeat-x;
}

如果背景图高度和导航栏高度一致，那么它只会横向铺开，不会向下重复。

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

如果只希望图片在垂直方向重复，可以使用：

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

repeat-y 表示背景图只沿 Y 轴方向重复，也就是从上到下重复。

这种方式常用于：

• 侧边栏背景；
• 竖向边框装饰；
• 左右栏阴影；
• 垂直纹理背景。

例如：

.aside {
  width: 200px;
  background-image: url("line.png");
  background-repeat: repeat-y;
}

如果 line.png 是一张宽度很小、高度适中的图片，就可以形成一条重复的竖向装饰线。

六、禁止图片平铺：no-repeat

很多时候我们并不希望背景图片平铺，而是只显示一次，比如 logo、图标、banner 图片等。这时可以使用：

.logo {
  width: 200px;
  height: 80px;
  background-image: url("logo.png");
  background-repeat: no-repeat;
}

no-repeat 表示背景图不会重复，只会显示一次。

如果不设置 background-repeat: no-repeat;，当元素宽高大于图片本身时，图片就可能不断重复，导致页面效果混乱。

因此，在设置图标背景时，一般都会写：

.icon {
  width: 32px;
  height: 32px;
  background: url("icon.png") no-repeat center center;
}

这里使用了 background 简写形式，同时设置了图片、不重复、水平垂直居中。

七、结合 background-position 控制平铺起点

背景图片默认从元素左上角开始平铺。如果想改变图片的位置，可以使用：

background-position

例如：

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

虽然图片会继续平铺，但平铺的起点会受到 background-position 的影响。

常见写法包括：

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

例如，让背景图从右上角开始显示：

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

对于普通纹理背景来说，平铺起点通常不重要；但如果背景图包含明显线条、图案或对齐要求，就需要注意 background-position。

八、结合 background-size 控制平铺图片大小

在 CSS3 中，可以使用 background-size 控制背景图的显示尺寸。它和 background-repeat 配合使用非常灵活。

例如：

.box {
  width: 500px;
  height: 300px;
  background-image: url("pattern.png");
  background-repeat: repeat;
  background-size: 50px 50px;
}

这表示背景图片会先被缩放到 50px × 50px，然后再进行平铺。

常见写法：

background-size: auto;
background-size: 100px 100px;
background-size: cover;
background-size: contain;

不过需要注意：

• cover 通常用于大背景图铺满容器；
• contain 通常用于完整显示背景图；
• 如果用于平铺背景，通常更常见的是设置固定尺寸，例如 20px 20px、50px 50px。

例如制作网格背景：

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

这段代码没有使用真实图片，而是用 CSS 渐变制作了网格背景。它的原理也是通过背景重复实现的。

九、使用 background 简写设置图片平铺

实际开发中，经常会使用 background 简写属性一次性设置多个背景相关属性。

例如：

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

这相当于：

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

如果想禁止平铺并居中显示：

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

如果还想设置背景尺寸，可以这样写：

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

注意：在 background 简写中，如果要写 background-size，需要放在 background-position 后面，并使用斜杠 / 分隔。

例如：

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

不能写成：

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

这种写法是不规范的。

十、多个背景图片如何平铺？

CSS 支持给同一个元素设置多个背景图。多个背景图之间用逗号分隔。

例如：

.box {
  width: 600px;
  height: 400px;
  background-image: url("star.png"), url("texture.png");
  background-repeat: repeat, repeat;
  background-position: left top, center center;
}

这里表示：

• 第一张背景图 star.png 重复平铺；
• 第二张背景图 texture.png 也重复平铺；
• 第一张图会显示在上层；
• 第二张图会显示在下层。

也可以让不同背景图采用不同平铺方式：

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

这表示：

• icon.png 不重复，居中显示；
• pattern.png 重复平铺，作为底部纹理。

这种方式在实际开发中非常实用，比如在一个按钮中，底层使用纹理平铺，上层放一个不重复的图标。

十一、图片平铺与元素尺寸的关系

背景图片的平铺范围由元素本身的尺寸决定。

例如：

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

背景图只会在 .box 的 300px × 200px 区域内平铺。

如果元素没有高度，背景可能看不到。例如：

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

如果 .box 内部没有内容，也没有设置高度，那么元素高度可能为 0，背景图自然无法显示。

解决办法：

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

或者让元素有内容：

  这里有一些内容

因此，如果你发现背景图片没有显示，首先应该检查：

1. 图片路径是否正确；
2. 元素是否有宽高；
3. 是否被其他样式覆盖；
4. 背景颜色或其他背景图是否遮挡；
5. 图片是否加载成功。

十二、背景图平铺和 img 标签有什么区别？

需要特别注意的是，background-repeat 只能控制 CSS 背景图片 的平铺，而不能直接控制 标签。

例如下面的 HTML：

这是一张普通图片，不会因为你写了 background-repeat 而自动平铺。

错误示例：

img {
  background-repeat: repeat;
}

这并不能让 本身重复显示。

如果你想让图片平铺，通常应该把图片作为背景图使用：

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

当然，如果确实想在页面中重复显示多个 ，那就需要通过 HTML 结构或 JavaScript 生成多个图片元素，而不是依靠 background-repeat。

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

1. 使用了 no-repeat

如果代码中有：

background-repeat: no-repeat;

那么图片自然不会平铺。可以改为：

background-repeat: repeat;

2. 图片太大，看起来不像平铺

如果背景图本身比容器还大，即使设置了 repeat，你也可能看不到重复效果。可以缩小背景尺寸：

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

3. 元素没有高度

没有内容、没有高度的块级元素，背景无法显示。需要设置高度：

.box {
  height: 300px;
}

4. 图片路径错误

路径错误会导致背景图无法加载，自然无法平铺。

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

路径要根据 CSS 文件所在位置来写，而不是根据 HTML 文件所在位置来写。很多初学者容易在这里出错。

5. 被其他 background 简写覆盖

例如：

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

后面的 background: #fff; 会把前面的背景图和重复设置一起覆盖掉。应该避免这种写法，或者把简写放在前面：

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

十四、实际案例：制作一个平铺纹理背景

HTML：

  
欢迎访问我的网站
  
这是一个使用 CSS 图片平铺制作的纹理背景。

CSS：

.page {
  min-height: 100vh;
  padding: 60px;
  background-image: url("texture.png");
  background-repeat: repeat;
}

这里的 texture.png 可以是一张很小的纹理图片，例如 30px × 30px。页面会自动把它重复显示，直到铺满整个可视区域。

十五、实际案例：横向重复的导航栏背景

HTML：

CSS：

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

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

如果 nav-bg.png 是一张宽度较小、高度为 60px 的图片，它就会沿水平方向重复，从而形成完整的导航栏背景。

十六、实际案例：使用 CSS 渐变实现平铺图案

除了使用真实图片，CSS 还可以通过渐变创建可重复背景。

例如制作斜线纹理：

.stripe {
  width: 100%;
  height: 300px;
  background-image: repeating-linear-gradient(
    45deg,
    #f5f5f5 0,
    #f5f5f5 10px,
    #e0e0e0 10px,
    #e0e0e0 20px
  );
}

这里使用的是 repeating-linear-gradient，它本身就是重复渐变，不需要额外图片。

再比如制作点状背景：

.dots {
  width: 100%;
  height: 300px;
  background-image: radial-gradient(#999 2px, transparent 2px);
  background-size: 20px 20px;
}

这个例子中，圆点通过 radial-gradient 生成，background-size 控制每个重复单元的大小，从而产生规则的点阵背景。

十七、CSS 图片平铺的性能建议

图片平铺虽然方便，但在项目中也要注意性能和视觉效果。

1. 尽量使用小尺寸无缝图片

平铺背景最好选择可以无缝衔接的图片。否则重复后会出现明显边界，影响美观。

2. 图片体积不要过大

如果只是纹理背景，建议使用较小的 PNG、WebP 或 SVG。图片太大会增加加载成本。

3. 适当使用 CSS 渐变替代图片

对于简单的条纹、网格、点阵，可以直接使用 CSS 渐变实现，减少 HTTP 请求。

4. 注意高分屏显示效果

在 Retina 屏幕上，普通小图可能显得模糊。可以准备 2 倍图，然后通过 background-size 缩放显示。

例如一张实际尺寸为 40px × 40px 的 2 倍图，希望按 20px × 20px 显示：

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

这样在高清屏上显示会更清晰。

十八、总结

CSS 图片平铺主要通过 background-repeat 属性实现。最常用的写法如下：

background-repeat: repeat;    /* 横向和纵向都平铺 */
background-repeat: repeat-x;  /* 只横向平铺 */
background-repeat: repeat-y;  /* 只纵向平铺 */
background-repeat: no-repeat; /* 不平铺 */

完整示例：

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

如果需要控制背景图大小，可以结合：

background-size: 50px 50px;

如果需要控制背景图位置，可以结合：

background-position: center center;

如果想使用简写，可以写成：

background: url("bg.png") repeat left top;

总的来说，如果你想让 CSS 图片平铺，就应该把图片设置为元素的背景图，然后使用 background-repeat 控制平铺方式。在实际开发中，根据需求选择 repeat、repeat-x、repeat-y 或 no-repeat，再配合 background-size 和 background-position，就可以实现绝大多数背景图片平铺效果。