如何将图像与容器重叠一半，如所示的示例

Question

我正在尝试创建此视图，但我不确定如何使图像与黑色背景重叠一半。我有一个 svg，其中包含汽车的全宽图形和线条中断的颜色。

我使用 Bulma 作为框架。如何让图像与黑色容器和白色容器重叠？

这是我现在得到的一个例子：https://codesandbox.io/s/bulma-autocomplete-forked-kdu4h?file=/src/index.js

Answer 1

要使 img 响应，您希望它保持其纵横比，同时填充与黑色元素相同的宽度，但您希望它被翻译得足够高，以使白线和黑线之间的中断始终保持在顶部容器。

这个 sn-p 通过将 img 作为黑色元素的子元素并与它的宽度相同但向上平移其高度的右侧 % 来实现这一点，黑色线从黑色元素上方开始。这几乎是其高度的 50%，实际上只是稍微多一点。

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

div {
  width: 100vw;
  height: 50vh;
  margin: 0;
  padding: 0;
  position: relative;
  top: 40%; /* just for this demo */
  background-color: black;
}

img {
  width: 100%;
  height: auto;
  transform: translateY(-52.5%);
  margin: 0;
  padding: 0;
  position: absolute;
}

<div>
  <img src="https://i.stack.imgur.com/mhA4r.png" />
</div>

Answer 2

你可以有一个像这样的 2 种颜色的 svg 波

body {
  background-color: teal;
}

<svg id="wave" width="740" height="110" viewBox="0 0 740 110" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M1 61.4997C243.5 -30.5003 306.5 2.9997 367 48.9997C427.5 94.9997 592.5 142.999 737 61.4997" stroke="black" stroke-width="5"/>
  <path d="M1 63.6579C244.159 -28.917 307.33 4.79235 367.995 51.0798C428.659 97.3672 594.107 145.667 739 63.6579" stroke="white" stroke-width="3"/>
</svg>

---

然后把它放下你的顶部容器

.block {
  height: 150px;
  width: 100%;
}

.black {
  background-color: black;
  position: relative;
}

#wave {
  float:left;
  transform: translatey(-50%);
}

<div class="block black"></div>
  <svg id="wave" viewBox="0 0 740 110" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M1 61.4997C243.5 -30.5003 306.5 2.9997 367 48.9997C427.5 94.9997 592.5 142.999 737 61.4997" stroke="black" stroke-width="5"/>
    <path d="M1 63.6579C244.159 -28.917 307.33 4.79235 367.995 51.0798C428.659 97.3672 594.107 145.667 739 63.6579" stroke="white" stroke-width="3"/>
  </svg>
<div class="block white"></div>