如何避免背景重复图片被截断并实现类似space-between的排列？

问题说明 #

用background-repeat: repeat-x;实现横向重复背景时，图片会一直重复到容器边缘并被截断，想要实现类似Flex布局justify-content: space-between;的效果——图片两端对齐、中间均匀分布间距，且不会出现半张截断的图片，同时希望用纯CSS实现，避免修改现有布局或使用JS监听窗口大小。

当前效果

预期效果

最优解决方案：使用CSS原生background-repeat: space #

这是最直接的纯CSS方案，完全满足需求，响应式友好，无需额外代码：

#container {
  width: 250px;
  height: 100px;
  background-image: url('https://placekitten.com/100/100');
  /* x方向均匀排列，y方向不重复 */
  background-repeat: space repeat-y;
  /* 确保图片垂直居中 */
  background-position: left center;
  border: black solid 3px;
}

原理说明

background-repeat: space是CSS原生属性值，作用于横向重复时：

• 会尽可能多地在容器内完整显示背景图片
• 自动将容器剩余的空白空间均匀分配到图片之间
• 图片始终两端对齐，不会出现截断的半张图片
• 容器宽度变化时会自动重新计算间距，完全适配响应式场景

进阶：固定间距的实现方式 #

如果需要固定图片之间的间距，而非自适应分配空白，可以通过拼接背景单元的方式实现：

#container {
  --img-width: 100px;
  --fixed-gap: 20px; /* 自定义固定间距 */
  width: 250px;
  height: 100px;
  /* 组合图片和透明渐变作为重复单元 */
  background-image: url('https://placekitten.com/100/100'), linear-gradient(transparent, transparent);
  /* 设置图片和间距的尺寸 */
  background-size: var(--img-width) 100%, var(--fixed-gap) 100%;
  /* 定位间距在图片右侧 */
  background-position: left center, calc(var(--img-width)) center;
  /* 横向重复整个单元 */
  background-repeat: repeat-x;
  border: black solid 3px;
}

注意事项

使用固定间距时，建议让容器宽度满足 (图片宽度 + 固定间距) × n 的倍数（n为正整数），这样不会在末尾出现多余的间距或截断。如果无法保证容器宽度符合该规则，还是优先使用background-repeat: space方案。

内容的提问来源于stack exchange，提问作者Daniel Cruz