将图像粘贴在其他图像的底部

Question

我想将我的 svg 图片放在另一张图片上，但将其放在第二张图片的底部：

我要贴在底部的图片是蓝色波浪形的。我已经让它工作了，但它没有响应。因此，当我更改视口时，蓝色图像会向上或向下移动并且不会覆盖模糊图像：

如何让蓝图随着模糊一起动？

这是我目前的情况：

<div>
  <img
    src="https://i.imgur.com/Jqm7gPO.png"
    style="width: 100%; height: 100%; overflow: hidden;"
  />
  <div style="overflow: hidden; position: relative; bottom: 10rem; width: 100%">
    <svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
      <path
        d="M0.00,49.99 C163.98,160.36 355.85,-98.19 500.00,49.99 L500.00,150.00 L0.00,150.00 Z"
        style="stroke: none; fill: #4286ff;"
      />
    </svg>
  </div>
</div>

svg 是从这里生成的波浪图像：https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections

Answer 1

问题是您的 bottom: 10rem 是一个硬编码值，仅适用于特定大小的外部 div。

为了提高响应速度，您可以将外部 div 的 position 设置为 relative，将内部 absolute 设置为 absolute，然后将内部设置div 的 bottom 为 0。这使得内部 div 始终位于外部

的最底部：

<div style="position:relative;">
  <img
    src="https://i.imgur.com/Jqm7gPO.png"
    style="width: 100%; height: 100%; overflow: hidden;"
  />
  <div style="overflow: hidden; position: absolute; bottom: 0; width: 100%">
    <svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
      <path
        d="M0.00,49.99 C163.98,160.36 355.85,-98.19 500.00,49.99 L500.00,150.00 L0.00,150.00 Z"
        style="stroke: none; fill: #4286ff;"
      />
    </svg>
  </div>
</div>

将图像粘贴在其他图像的底部

Stick image over bottom of other image

html

css

position

image

css-position