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

Question

我想要的：我想要的（也裁剪第一个，但保持对称）：我有的：

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

rhomb.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: repeat-x;

和

background-repeat: space;

似乎解决了我的问题。（不是 100%，但在几乎所有情况下）

space: tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit, space them out evently images always touching the edges. (https://css-tricks.com/almanac/properties/b/background-repeat/)

另外：https://www.impressivewebs.com/space-round-css3-background/

Answer 2

基本上，当涉及到背景时，遗憾的是，我们无法明确调整图像的大小。我们可以填满整个页面或保留图片的原始图像。我的想法是使用图片编辑软件自己创建多个图像，然后以全屏格式添加重复的图像。

Answer 3

尽管 background-repeat 中的 space 仍然支持不佳，但 border-image 中的孪生属性得到了很好的支持（从 IE11 开始)

.test {
  height: 0px;
  width: 182px;
  margin: 5px;
  border-style: solid;
  border-width: 0px;
  border-bottom-width: 38px;
  border-image: url(https://i.stack.imgur.com/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>

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

Repeat background image - no crop or make it symmetric

html

twitter-bootstrap

css

twitter-bootstrap-4