Как сделать наложение фона?

Question

Меня интересует как сделать наложение на фон слоя определенного цвета с прозрачной частью как в этом макете. Может кто знает хорошие способы как это реализовать, поэтому попрошу помочь сделать похожий фон внахлест.

То, о чем я говорю, есть в шапке сайта. Ссылка на макет: https://www.figma.com/file/VCBhj0WljD20IzHilnjMSJ/PrivateJetBooking?node-id=0%3A1

Уточню, цветной фильтр накладывается на фон, однако определенная область остается без этого фильтра, как это сделать?

Answer 1

Вы можете добиться этого, используя box-shadow в качестве наложения белого, и элемент станет вот таким иллюминатором:

Answer 2

Простой способ сделать это. Вы можете попробовать с кодом ниже.

      <style>

  .main-div {
  width: 100%;
  height: 350px;
  position: relative;
  background-image: url("https://images.unsplash.com/photo-1436491865332-7a61a109cc05");
  background-position: center;
  background-size: cover;
}

.inner-div {
  width: 130px;
  height: 200px;
  position: absolute;
  top: 70px;
  right:100px;
  border: 10px solid white;
  border-radius: 80px;
  box-shadow: 0px 0px 0px 99999px rgb(255 255 255 / 75%);

}
</style>

<div class="main-div">
    <div class="inner-div"></div>
</div>

Answer 3

Мне удалось найти решение. Это не очень элегантно, но работает.