html - 重复背景图像 - 不裁剪或使其对称

Question

我想要的: 我想要的(也裁剪第一个，但保持对称): 我拥有的:

div.row.separator div.col {
  height: 40px;
  width: 100%;
  padding: 0px;
  background-image: url("./images/rhomb.png");
  background-repeat: repeat-x;
}

菱形.png:

<div class="container-fluid" id="main-content">
  <div class="row">
    <div class="col">
      <h1>Title here 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
      luctus eros at maximus tincidunt. Donec fringilla mattis massa,
      vitae blandit massa egestas sed. Maecenas ipsum ligula, pretium
      nec pellentesque convallis, consequat at magna.</p>
    </div>
  </div>
  <div class="row separator">
    <div class="col">
    </div>
  </div>
  .......

主体为灰色，容器为白色。我想要在一个部分之后有一行菱形作为分隔符。

因此，在 div 中将小图像用作背景 repeat-x 是否可以防止裁剪最后一个图像或对第一个图像进行相同的裁剪(将重复背景居中对齐...)？

更新:随意尝试:https://github.com/GhitaB/sample-design-bootstrap4-css (我只是好奇。对我来说不是真正的问题。)

Answer 1

尽管 background-repeat 中的 space 支持仍然很差，但 border-image 中的 twin 属性得到了很好的支持(从 IE11 开始)

.test {
  height: 0px;
  width: 182px;
  margin: 5px;
  border-style: solid;
  border-width: 0px;
  border-bottom-width: 38px;
  border-image: url(/image/8aOpi.png) 0 0 38 0 space;
}

.test:nth-child(2) {
  width: 210px;
}

.test:nth-child(3) {
  width: 220px;
}
.test:nth-child(4) {
  width: 250px;
}

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>