给 body 设了一张小图标当背景，结果图标密密麻麻铺满整个屏幕，这就是 background-repeat 的默认值在起作用：repeat，横竖两个方向无限平铺。想让背景听话，得把它的几个取值搞清楚。

五个取值各管什么

  • repeat：默认值，横竖都平铺，超出容器部分裁掉
  • no-repeat：只显示一张，不平铺，做 banner 背景必用
  • repeat-x / repeat-y：只沿横向或纵向铺一条，常用于分隔线、渐变条
  • space：图片之间均匀留空隙，不裁切图片
  • round：拉伸或压缩图片，凑成整数份正好铺满

space 和 round 这两个冷门值其实很好用：容器宽度不是图片整数倍时，repeat 会把边缘那张裁掉半个，很难看；换成 round 就自动缩放补齐，换成 space 就摊开留缝。

多背景图分别控制

CSS 允许一个元素叠多张背景图，平铺方式也能一一对应着写，逗号隔开：

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

顺序和 image 一一对应，第一张在最上层。这两行还能并进 background 简写里，background: url(a.png) no-repeat center，一句写完。

搭配 background-size 使用

现在更常见的做法是干脆不平铺：background-size 设 cover 让图自动铺满容器、裁掉多余，设 contain 则完整显示图片、留白边。响应式页面里，图标类背景用 no-repeat 加 size 控制占多数，纯平铺更多用在纹理、噪点这类无缝小图上。

一句话判断：纹理类背景放心用 repeat，内容类大图基本都该是 no-repeat 加 background-size，别让 background-repeat 的默认值替你做决定。