Как вырезать кусок из фона, который задан цветом?

Question

[Михаил Р.]

Всем привет!

Имеется первый блок с bg-изображение. Слоем выше находится следующий-второй блок, но с уже bg в виде #fff, т.е. первый блок с фоном #fff перекрывает собой второй блок с bg-изображение.

Имеется-ли возможно вырезать часть фона второго блока так, чтобы мы через это `отверстие` увидели изображение первого блока?

Скрин-пример:


Спасибо!

Answer 1

[Aleksey Solovyev]

свойства clip и clip-path(проще будет подготовить маску и по ней вырезать)
https://www.sarasoueidan.com/blog/css-svg-clipping/

<svg>
  <defs>
    <clipPath id="clipping">
      <polygon points="98.4999978 153.75..."/> // ваша маска
    </clipPath>
  </defs>
</svg>

.item {
  clip-path: url(#clipping);
}