Как сделать прозрачное «отверстие» в блоке с фоном(background)?

#css

Ситуация такая что есть блок с background, нужно в нем сделать отверстие(прозрачное)
чтобы можно было наблюдать что за фоном. 

Есть ли реализация без внедрения png svg и тд?
Видел такую реализацию, но так и не понял как это было сделано

Есть ли какие-то идеи? 
    

Ответы

Ответ 1

Можно попробовать с помощью псевдоэлемента :after и огромной непрозрачной тени:



  #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;
  }