如何实现仅Grid/Flex容器内Div显示背景，其余区域为白色？

不需要两层独立容器，用单个Grid容器就能实现需求，核心思路是利用CSS遮罩（mask）让网格项区域透出底层渐变，其余区域保持白色，同时完美支持border-radius。

实现步骤 #

1. 单个Grid容器设置白色背景，用伪元素作为底层渐变背景层。
2. 给Grid容器添加遮罩，遮罩形状与网格项完全匹配，仅网格项位置透出渐变，其余区域被白色遮挡。
3. 为网格项添加圆角遮罩，确保透出的渐变贴合圆角轮廓。

完整代码 #

CSS #

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.grid-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px; /* 控制网格项之间的间距 */
  padding: 20px;
  background-color: white;
  border-radius: 15px;
  border: 1px solid black;
  /* 遮罩：画出网格项位置，透明区域透出渐变，白色区域遮挡 */
  mask: 
    repeating-linear-gradient(transparent, transparent 100px, white 100px, white calc(100px + 30px))
    / calc(100% / 3) calc(100% / 3);
  -webkit-mask: 
    repeating-linear-gradient(transparent, transparent 100px, white 100px, white calc(100px + 30px))
    / calc(100% / 3) calc(100% / 3);
}

/* 底层渐变背景 */
.grid-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, yellow, purple);
  border-radius: 15px;
  z-index: -1;
}

.grid-item {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  border-radius: 10px;
  /* 让网格项圆角作用于透出的渐变 */
  mask: border-box;
  -webkit-mask: border-box;
}

HTML #

<body>
  <div class="grid-container">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
</body>

关键说明 #

• mask属性是核心：通过重复渐变绘制出与网格项匹配的遮罩，透明区域允许底层渐变显示，白色区域被容器的白色背景遮挡。
• 伪元素::before作为渐变背景层，通过z-index: -1放在容器下方，不干扰网格项交互。
• mask: border-box确保网格项的圆角能裁剪透出的渐变，避免渐变超出圆角范围。

如果坚持使用你原来的两层容器方案，只需调整顶层容器的样式：

.container-top-layer {
  position: absolute;
  display: grid;
  grid: auto-flow / 1fr 1fr 1fr;
  background-color: white;
  padding: 15px;
  z-index: 2;
  /* 添加遮罩，仅网格项位置透明 */
  mask: 
    repeating-linear-gradient(transparent, transparent 100px, white 100px, white calc(100px + 30px))
    / calc(100% / 3) calc(100% / 3);
  -webkit-mask: 
    repeating-linear-gradient(transparent, transparent 100px, white 100px, white calc(100px + 30px))
    / calc(100% / 3) calc(100% / 3);
  border-radius: 15px;
}

这样顶层容器的白色背景仅覆盖网格项外的区域，网格项位置透明，透出底层渐变。

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