Achieving this effect is totally possible using the clip-path property! Just think of your div as a piece of paper and clip-path as a pair of scissors. If you want to create a circular cutout in the middle, you'll need to define the path around the edges, through the middle, along a circle, and back to the starting point.
I've put together a python script that generates the necessary CSS for you. Please excuse the coding style...
import math
# Define radius as a percentage of width
radius = 0.25
xPos = 0.5
yPos = 0.5
smooth = 50
x = []
y = []
x.append(0)
y.append(0)
# Continue defining points around the circle...
cssValue = "polygon("
for k in range(0, len(x) - 1):
cssValue += str(abs(x[k]*100)) + "% " + str(abs(y[k]*100)) + "%, "
cssValue += str(abs(x[len(x) - 1]*100)) + "% " + str(abs(y[len(x) - 1]*100)) + "%);"
property = "clip-path: "
spaces = " "
print(".excludeCircle{");
print(spaces + "-webkit-"+property + cssValue)
print(spaces + property + cssValue)
print("}")
Here's how the final result appears:
.excludeCircle{
-webkit-clip-path: polygon(0% 0%, 0% 100%, 25.0% 100%, 25.0% 50.0%, 25.0% 50.0%, ...);
clip-path: polygon(0% 0%, 0% 100%, 25.0% 100%, 25.0% 50.0%, 25.0% 50.0%, ...);
}
img{
width: 300px;
height: 200px;
}
body{
background-color: green;
}
<div style="position: absolute;">
This is text in the background.
</div>
<img src="https://i.sstatic.net/l2ETg.png" class="excludeCircle"/>
Note: The current method may produce an oval shape instead of a perfect circle. To fix this, consider using pixel values or x/y radius adjustments accordingly. Alternatively, some JavaScript might be needed for a dynamic solution.