仅在子元素范围内显示父元素背景渐变的实现问题

问题场景 #

需要让父元素的渐变背景只在子元素的圆形区域内显示，其余区域隐藏。之前尝试给父元素加::after伪元素用白色背景遮盖父背景，但子元素也跟着变成白色，达不到预期效果。

方案一：层级控制+背景继承（推荐，支持动态子元素位置） #

这个方案通过调整元素层级，让子元素透出父元素的渐变，其余区域被白色背景遮盖，子元素位置动态调整也不受影响：

#parent {
  background: linear-gradient(#e66465, #9198e5);
  width: 100px;
  height: 300px;
  position: relative; /* 为伪元素提供定位基准 */
}

/* 用伪元素覆盖父元素背景，层级低于子元素 */
#parent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 0;
}

.child {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  border-radius: 50%;
  color: white;
  z-index: 1; /* 让子元素显示在伪元素上方 */
  background: inherit; /* 继承父元素的渐变背景 */
}

.top-10 { top: 10px; }
.top-20 { top: 20px; }
.top-40 { top: 40px; }
.top-60 { top: 60px; }

<div id="parent">
  <div class="child top-10"></div>
  <div class="child top-20"></div>
  <div class="child top-40"></div>
  <div class="child top-60"></div>
</div>

原理说明

• 父元素的::before伪元素会完全覆盖父元素的渐变，但它的层级（z-index:0）比子元素低（z-index:1），所以子元素能显示在它上面。
• 子元素通过background: inherit继承父元素的渐变，因此只有子元素的圆形区域会透出渐变，其余区域被伪元素的白色背景挡住。
• 子元素随便调整位置，只要保持position: relative和z-index:1，就能正常显示渐变。

方案二：CSS Mask遮罩（适合静态场景或JS动态生成遮罩） #

如果子元素形状复杂或者需要更精准的控制，可以用CSS mask 属性直接定义父元素的可见区域：

#parent {
  background: linear-gradient(#e66465, #9198e5);
  width: 100px;
  height: 300px;
  /* 用多个circle()组合成遮罩，每个circle对应一个子元素的位置和半径 */
  mask: 
    circle(25px at 25px 35px),  /* top-10子元素：圆心(25px, 10px+25px)，半径25px */
    circle(25px at 25px 45px),  /* top-20子元素：圆心(25px, 20px+25px) */
    circle(25px at 25px 65px),  /* top-40子元素：圆心(25px, 40px+25px) */
    circle(25px at 25px 85px);  /* top-60子元素：圆心(25px, 60px+25px) */
  /* 兼容webkit内核浏览器 */
  -webkit-mask: 
    circle(25px at 25px 35px),
    circle(25px at 25px 45px),
    circle(25px at 25px 65px),
    circle(25px at 25px 85px);
}

.child {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  border-radius: 50%;
  color: white;
  background: transparent; /* 子元素设透明，显示父元素遮罩后的渐变 */
}

.top-10 { top: 10px; }
.top-20 { top: 20px; }
.top-40 { top: 40px; }
.top-60 { top: 60px; }

原理说明

• mask 属性定义了父元素的可见区域，只有指定的圆形区域会显示渐变背景，其余区域自动隐藏。
• 如果子元素位置动态变化，需要同步更新mask中的坐标参数，适合用JS动态生成遮罩值的场景。

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