空心圆形物品

Question

I would like to achieve circle cuts/hollows in the layer that covers the background images.

I have the background image covered with white tint (opacity 60%). On the background, I have 3 circles that include text.

How can I cut "rings" in the white tint?

I would like to make hollows/cuts in the white tint like here:

My code looks now as below:

 body { margin: 0; }.block { position: relative; width: 100%; }.bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -3; }.bg:before { content: ""; background: #ffffff; opacity: 0.6; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }.bg img { display: block; object-fit: cover; object-position: center; width: 100%; height: 100%; }.wrapper { min-height: 100vh; display: flex; justify-content: center; align-items: center; gap: 0 30px; }.item { background: #aaaaaa; width: 150px; height: 150px; border-radius: 100%; display: flex; flex-direction: columns; justify-content: center; align-items: center; padding: 10px; }.item h2 { font-family: Arial, sans-serif; font-size: 15px; color: #000000; text-align: center; margin: 0; }

 <section class="block"> <div class="bg"> <img src="https://i.picsum.photos/id/98/1920/1080.jpg?hmac=38vHAR4QCfR9YGpaasbQ0h390ZJnDlnQqzv3xTDF6ik" alt="" /> </div> <div class="wrapper"> <div class="item"> <div class="item__content"> <h2>Heading 1</h2> </div> </div> <div class="item"> <div class="item__content"> <h2>Heading 2</h2> </div> </div> <div class="item"> <h2>Heading 3</h2> </div> </div> </section>

Answer 1

You can do it like below. I have simplified the code as well:

 body { margin: 0; } section { min-height: 100vh; /* a grid container with 3 columns*/ display: grid; grid-template-columns: 1fr 1fr 1fr; /* the image as background */ background: url(https://i.picsum.photos/id/98/1920/1080.jpg?hmac=38vHAR4QCfR9YGpaasbQ0h390ZJnDlnQqzv3xTDF6ik) center/cover; }.item { overflow: hidden; /* hide the overflow of the shadow */ /* center the heading */ display: grid; place-items: center; /**/ }.item h2 { width: 80%; /* adjust this to control the size */ aspect-ratio: 1; /* keep it a perfect circle */ box-sizing: border-box; border-radius: 50%; /* center the content of the heading */ display: grid; place-items: center; /**/ padding: 20px; /* this will control the inner space */ background: rgb(255 255 255/60%) content-box; /* color only the content area */ box-shadow: 0 0 0 100vmax rgb(255 255 255/60%); /* a big box-shadow */ }

 <section> <div class="item"> <h2>Heading 1</h2> </div> <div class="item"> <h2>Heading 2</h2> </div> <div class="item"> <h2>Heading 2</h2> </div> </section>