如何防止背景重复图像被截断

Question

有没有办法防止CSS使用背景重复截断背景图像？

background-repeat: repeat-x;

并排重复图像，直到空间用完，并在 div 结束处剪切图像。有没有办法在图像之间留出空间？就像某种

justify-content: space-between;

但对于背景图像？

当前结果

预期结果

我知道我可以使用图像并使用显示柔性，但这会扰乱布局。我还阅读了this SO Question，其中显示了如何使用 js 来完成此操作，但我认为这不值得，因为我必须监听调整大小事件才能使其响应。有没有办法只用CSS来做到这一点？

#container {
  width: 250px;
  height: 100px;
  background-image: url('https://placekitten.com/100/100');
  border: black solid 3px;
}

<div id="container">
</div>

`

Answer 1

您可以使用background-repeat: space;

https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

#container {
  width: 250px;
  height: 100px;
  background-image: url('https://placekitten.com/100/100');
  border: black solid 3px;
  background-repeat: space;
}

<div id="container">
</div>