如何在多层嵌套div中实现背景镂空穿透效果？

实现思路 #

通过CSS mask 属性结合 mask-composite，在各上层div的背景中挖除最内层元素的区域，让底层星空背景透过镂空区域显示，同时保留各上层div的背景色和文本，完全无需设置上层元素透明。

HTML结构 #

<div class="body">
  .body 文本内容
  <div class="card">
    .card 文本内容
    <div class="nestedcard">
      .nestedcard 文本内容
      <div class="nestedinnestedcard">
        .nestedinnestedcard 文本内容
      </div>
    </div>
  </div>
</div>

CSS实现 #

/* 底层星空背景（可替换为实际星空图片） */
.body {
  background: 
    radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
    radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
    radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px),
    #0a0e27;
  background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
  padding: 3rem;
  color: #fff;
}

/* 第一层嵌套卡片 */
.card {
  background: #ff6b6b; /* 红色背景 */
  padding: 3rem;
  /* 核心：mask设置为整体区域减去最内层元素的位置 */
  mask: 
    linear-gradient(#fff, #fff) no-repeat calc(3rem + 3rem) calc(3rem + 3rem) / calc(100% - 6rem - 6rem) calc(100% - 6rem - 6rem),
    linear-gradient(#fff, #fff);
  mask-composite: exclude;
}

/* 第二层嵌套卡片 */
.nestedcard {
  background: #4ecdc4; /* 青色背景 */
  padding: 3rem;
  /* 同样用mask挖除最内层区域 */
  mask: 
    linear-gradient(#fff, #fff) no-repeat 3rem 3rem / calc(100% - 6rem) calc(100% - 6rem),
    linear-gradient(#fff, #fff);
  mask-composite: exclude;
}

/* 最内层卡片 */
.nestedinnestedcard {
  padding: 3rem;
  color: #fff;
  /* 确保文本显示在镂空区域上层 */
  position: relative;
  z-index: 1;
}

原理说明 #

1. 底层背景：.body 设置星空背景，作为最终透过镂空显示的底层视觉。
2. 上层卡片mask逻辑：.card 和 .nestedcard 使用两层渐变作为mask：
   • 第一层渐变精准定位到最内层元素的位置，尺寸与最内层完全匹配；
   • 第二层渐变覆盖整个卡片区域；
   • 通过 mask-composite: exclude 将第一层渐变的区域从第二层中排除，实现精准镂空。
3. 最内层元素：无需设置背景，仅保留文本，利用z-index确保文本在镂空区域上层正常显示。

注意：mask中的位置和尺寸需要根据各层的padding值计算调整，确保镂空区域与最内层元素完全对齐。

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