CSS x重复背景避免不必要的截断

Question

我有一个水平重复的分隔线背景图片，如下所示：

.divider {
    background-image: url('https://i.stack.imgur.com/kMCJ6.png');
    background-repeat: repeat-x;
    height: 200px;
    width: 100%;
    display:block;
}

<div class="divider"></div>

但是，不可避免地，基于浏览器窗口的宽度，我可以得到如下所示的渲染：

是否有任何方法可以确保水平重复仅突破背景图像中的空白？也就是说，有没有一种方法可以使用CSS（可能还包含一些Javascript）来指定类似内容，除非您可以将整个重复块放置在可见区域，否则不要重复背景图像的副本？

Answer 1

如果您愿意在重复的图像之间留有空格，可以使用
background-repeat: space ：

.divider {
  background-image: url('https://i.stack.imgur.com/kMCJ6.png');
  background-repeat: space no-repeat;
  height: 200px;
  width: 100%;
  display: block;
}

<div class="divider"></div>

或者，您可以缩放图像以适合 background-repeat: round ：

.divider {
  background-image: url('https://i.stack.imgur.com/kMCJ6.png');
  background-repeat: round no-repeat;
  height: 200px;
  width: 100%;
  display: block;
}

<div class="divider"></div>

请注意，space和round都默认在水平和垂直方向上应用重复，因此，如果您只想水平应用重复，则可以将no-repeat作为第二个参数（如上所示）。