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

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>
  .......

身体是灰色的，容器是白色的。我想在一个节之后作为分隔符使用一行rhombs。

因此，在div中使用一个用作背景repeat-x的小图像可以防止最后一个上的裁剪或在第一个上进行相同的裁剪（对齐重复背景的中心......）？

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

Answer 1

即使背景重复中的空间仍然支持不足，边界图像中的双重属性也有很好的支持（从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>

Answer 2

更换：

background-repeat: repeat-x;

同

background-repeat: space;

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

space：在两个方向上平铺图像。除非单个图像太大而不适合，否则切勿裁剪图像。如果可以放置多个图像，则将它们分开，使图像始终接触边缘。 （https://css-tricks.com/almanac/properties/b/background-repeat/）

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

Answer 3

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