css – How to make a transparent "hole" in a block with a background (background)?

Question:

The situation is such that there is a block with background , you need to make отверстие(прозрачное) in it so that you can observe what is behind the background.

Is there an implementation without embedding png svg and so on? I saw such an implementation, but did not understand how it was done

Are there any ideas?

Answer:

You can try with the :after pseudo-element and a huge opaque shadow:

  #hole {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    overflow: hidden;
  }

  #hole:after {
    content: "";
    position: absolute;
    border-radius: 100%;
    width: 300px;
    height: 300px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 0px 2000px #000;
  }

  body {
    background: url('https://wallpaperbrowse.com/media/images/Wallpaper-1.png');
    background-size: cover;
  }
<html>
  <body>
	  <div id="hole" ></div>
  </body>
</html>
Post Views: 4
Scroll to Top