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

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

Ответ

Можно попробовать с помощью псевдоэлемента :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; }