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>