Use css3's radial-gradient to achieve a penetrating circle

Look at the requirements first:

As shown in the picture, you need to create this effect. How to usually do it? The semicircle cut into the picture can solve a situation where the background of the picture is fixed and not tiled.

If the background image is a tiled pattern, isn’t it fixed? The cut semicircle cannot correspond to the background image

Now you can use the radial gradient of css3 to realize this transparent circle. In this way, if the circle is transparent, you don’t have to worry about the background image

background-image: repeating-radial-gradient(500px 500px at 50% 0px ,transparent 0%, transparent 50px,#0cc 50px, #0cc 200%);

Code Explanation:

500px 500px at 50% 0px ,

The width and height of the background color of the white area, and the coordinates of the center of the circle

transparent 0%, transparent 50px,#fff 50px, #fff 200%

from the center of the circle to the small circle The background color is transparent, and the background color from the small circle to the big circle is #0cc