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

Question

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

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

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

Answer 1

你可以像这样有 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>

Answer 2

为了使 img 具有响应性，您希望它保持纵横比，同时填充与黑色元素相同的宽度，但您希望它向上平移到足以使白线和黑线之间的中断始终保持在容器顶部。

此代码段通过将 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>

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

How to overlap image half way with container like example shown

html

css

bulma