Наклеить изображение поверх другого изображения

Question

Я хочу разместить имеющееся у меня изображение svg поверх другого изображения, но оставить его внизу второго изображения:

The image I want to stick at the bottom is the blue wavy one. I have got it to work, but it isn't responsive. So when I change the viewport, the blue image moves either up or down and doesn't cover the blurry image:

<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 - это жестко запрограммированное значение, которое работает только с определенным c размером внешнего 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>