如何在背景图的白色遮罩层上实现环形镂空效果？

要在白色半透明遮罩上剪出环形镂空，让背景图透过环形区域显示，同时保留中间的灰色圆形元素，可以通过CSS mask 属性实现，以下是修改后的完整代码和原理说明：

修改后的完整代码 #

CSS 代码 #

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: rgba(255,255,255,0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  /* 环形镂空的核心mask设置 */
  mask: 
    radial-gradient(circle at calc(50% - 180px) 50%, black 75px, transparent 76px, transparent 95px, black 96px),
    radial-gradient(circle at 50% 50%, black 75px, transparent 76px, transparent 95px, black 96px),
    radial-gradient(circle at calc(50% + 180px) 50%, black 75px, transparent 76px, transparent 95px, black 96px);
  mask-composite: add;
  -webkit-mask-composite: source-over; /* 兼容webkit内核浏览器 */
}
.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: column; /* 修正原代码的columns拼写错误 */
  justify-content: center;
  align-items: center;
  padding: 10px;
  position: relative;
  z-index: 1; /* 确保圆形元素在遮罩上层 */
}
.item h2 {
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #000000;
  text-align: center;
  margin: 0;
}

HTML 代码 #

<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>

实现说明 #

1. 核心逻辑：通过mask属性定义遮罩的显示区域——黑色区域显示白色半透明背景，透明区域隐藏遮罩，露出下层的背景图，从而实现环形镂空效果。
2. 环形参数调整：
   • 75px：对应灰色圆形元素的半径（150px直径的一半），此区域保留白色遮罩，不露出背景；
   • 76px-95px：环形镂空的宽度（20px），此区域隐藏遮罩，显示背景图；
   • 若需要调整环形宽度，修改95px的数值即可（比如改为100px，环形宽度变为25px）。
3. 定位精准性：calc(50% ± 180px)是根据元素宽度（150px）和间隙（30px）计算得出的环形中心位置，确保环形与灰色圆形元素完全对齐。
4. 层级控制：通过z-index明确层级顺序：背景图（z=-3）→ 白色遮罩（z=-2）→ 灰色圆形元素（z=1），保证视觉效果符合预期。

内容的提问来源于stack exchange，提问作者Matt