我将如何复制此图像中的位置？

Question

我正在尝试构建此视图，但在将圆圈和汽车图像放置在该路径（线）上时遇到了问题。对于汽车路径图像的每个部分，我都有单独的文件。还有两段文字，每段都在一边，没有完全对齐。

我如何在保持一致的情况下重新创建这个？

Answer 1

因为我们没有将波浪线作为数学公式，而是包含在 png 中，并且在线上方和下方都有很大的边距，所以我们必须使用测量值，因此必须使用分数来计算出其中的位置相对于线条 png，汽车和圆圈将被放置。

此代码段使所有四个 png 成为标题下方元素的背景。通过这种方式，两列可以放置在与两个圆圈左侧相同的距离处（即相对于内容的宽度）。如果这些要改变，那么圆的垂直位置的计算也必须改变。

汽车水平放置在中间，再次调整垂直位置，使其出现在直线的顶部。

结果是：

它是响应式的，因为一切最终都是根据视口的宽度计算的。

h1 {
  text-align: center;
}

.content {
  width: 100vw;
  height: 100vh;
  position: relative;
  --h: calc(754 / 1400 * 100vw);
  /* the height of the wavy line image file */
  --top: calc(var(--h) * -0.45);
  /* the position of the top of the wavy line image */
  background-image: url(https://i.stack.imgur.com/rbWbW.png), url(https://i.stack.imgur.com/9DQ8A.png), url(https://i.stack.imgur.com/qKOxp.png), url(https://i.stack.imgur.com/fQ3el.png);
  background-repeat: no-repeat no-repeat;
  background-size: 10% auto, 1% auto, 1% auto, 100% auto;
  background-position: 50% calc(var(--top) + (0.48 * var(--h))), 12% calc(var(--top) + (0.56 * var(--h))), 62% calc(var(--top) + (0.475 * var(--h))), 0 var(--top);
}

.col1 {
  width: 35%;
  position: absolute;
  top: calc(var(--top) + (0.7 * var(--h)));
  left: 12%;
  margin: 0;
  padding: 0;
}

.col2 {
  width: 35%;
  position: absolute;
  top: calc(var(--top) + (0.6 * var(--h)));
  left: 62%;
  margin: 0;
  padding: 0;
}

<h1>Our Services</h1>
<div class="content">
  <div class="col1">content of column 1</div>
  <div class="col2">content of column2</div>
</div>

我将如何复制此图像中的位置？

How would I duplicate the placement in this image?

html

css

bulma