cssbackgroundoverlaybackground-colorflutter-opacity

How to make background overlay?


I'm interested in how to make an overlay over the background of a layer of a certain color with a transparent part as in this layout. Maybe someone knows good ways to implement this, so I'll ask you to help make a similar background overlap.

What I'm talking about is in the header of the site. Layout link: https://www.figma.com/file/VCBhj0WljD20IzHilnjMSJ/PrivateJetBooking?node-id=0%3A1

I will specify, the color filter is imposed on a background, however the certain area remains without this filter, how to make it?


Solution

  • You can achieve it by using box-shadow as overlay white, and element will become a porthole like that:

    .background {
      width: 100%;
      height: 300px;
      background-position: center;
      background-size: cover;
      position: relative;
      overflow: hidden;
    }
    
    .hole {
      width: 120px;
      height: 200px;
      position: absolute;
      top: 50px;
      right: 100px;
      border: 10px solid white;
      border-radius: 80px;
      box-shadow: 0px 0px 0px 99999px rgb(255 255 255 / 80%);
    }
    <section class="background" style="background-image: url('https://images.pexels.com/photos/62623/wing-plane-flying-airplane-62623.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260')">
      <div class="hole"></div>
    </section>