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

即使背景重复中的空间仍然支持不佳，border-image中的twin属性也有很好的支持（从IE11开始）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

更换：

background-repeat: repeat-x;

与

background-repeat: space;

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

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

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

Answer 3

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

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

3 个答案: