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

【问题标题】：Stick image over bottom of other image将图像粘贴在其他图像的底部
【发布时间】：2020-11-23 00:53:13
【问题描述】：

我想将我拥有的 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

【问题讨论】：

标签： html css image position css-position

【解决方案1】：

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

为了让事情更敏感，你可以设置外部div的position为relative，内部的为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>

【讨论】：