CSS background-repeat: space属性异常问题求助

问题根源 #

核心问题是body元素默认没有占满整个视口高度——默认状态下，body的高度由内部内容决定，你的页面里body是空的，所以它的高度几乎为0，背景图片只能在这个有限高度里重复，自然只显示一行。另外background-repeat: space的特性是在可用空间内均匀分布图片且不裁剪，但如果容器高度不够，根本无法容纳多行图片。

修复方案 #

只需两步就能解决：

1. 让html和body占满整个视口高度，同时去掉默认margin避免出现滚动条；
2. 根据需求选择合适的背景重复和尺寸设置：
   • 要无间隙完全铺满，用background-repeat: repeat；
   • 坚持用space实现均匀分布的话，得确保容器高度足够容纳多行图片，同时调整background-size让图片能整行整列排列。

修正后的代码示例 #

CSS代码

html, body {
  height: 100%;
  margin: 0; /* 移除默认边距 */
}

body {
  background-image: url("https://source.unsplash.com/user/c_v_r/100x100");
  background-size: 100px;
  background-repeat: repeat; /* 直接重复铺满，也可替换为space */
}

HTML代码（无需修改，保留原结构即可）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>

补充说明 #

• 你之前改background-size为set或initial没用，因为根本问题是容器高度不足，而非尺寸设置本身；
• 用round时列方向压缩，是因为容器高度无法容纳整数行的100px高图片，round会自动缩放图片来凑整行数，导致图片被压缩。如果想用round且不压缩，需要让容器高度是background-size的整数倍（比如容器高500px，图片高100px，刚好5行）。

内容的提问来源于stack exchange，提问作者Kamran Yousef zade