本文介绍一种简洁高效的 css 方案：通过为网格项（grid items）单独设置 `background-image` 并配合 `background-attachment: fixed`，使所有子元素共享同一渐变背景，同时容器间隙和内边距区域自然呈现白色背景，无需多层定位或遮罩。
实现这一效果的关键在于背景的“视觉连续性”控制，而非图层叠加。传统思路常试图用底层容器渲染背景、顶层容器“挖空”子元素来透出背景，但会因 border-radius、margin、padding 等导致边缘断裂或覆盖异常。而 background-attachment: fixed 提供了更优雅的解法：它让每个子元素的背景图像相对于视口固定，因此所有子元素渲染的是同一张“静止”的渐变图——视觉上无缝衔接，仿佛整个网格被一张大图覆盖；而子元素之间的 gap、容器 padding 区域本身无背景（默认透明），在白色 <body> 或显式设为 background-color: white 的父容器下，自然呈现纯白。
以下是完整可运行的实现代码：
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white; /* 确保容器外层为白色 */
}
.grid {
display: grid;
grid: auto-flow / repeat(3, 1fr); /* 推荐写法，语义更清晰 */
gap: 15px; /* 使用 gap 替代 margin，更可控 */
padding: 20px;
border-radius: 15px;
border: 1px solid black;
background-color: white; /* 容器背景显式设为白色 */
}
.grid > * {
width: 100px;
height: 100px;
border-radius: 10px;
border: 1px solid black;
/* ✅ 核心：共享且对齐的渐变背景 */
background-image: linear-gradient(90deg, #ffeb3b, #9c27b0);
background-attachment: fixed; /* 必须！保证所有 item 渲染同一视口坐标下的背景 */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}<div class="grid"> <div></div><div></div><div></div> <div></div><div></div><div></div> <div></div><div></div><div></div> </div>
⚠️ 注意事项与最佳实践：
- background-attachment: fixed 是本方案的基石，缺之则每个子元素独立平铺/拉伸背景，失去“整体感”；
- 避免在 .grid 上设置 background-image，否则会覆盖白色背景；所有背景逻辑应只作用于 >.grid > *；
- 若需响应式适配，建议结合 background-size: cover 与 background-position 微调，而非依赖绝对尺寸；
- gap 属性比在子元素上使用 margin 更可靠（避免外边距合并、圆角切割等问题），且能确保空白区域始终为容器背景色（即白色）；
- 如需兼容旧版 Safari（<15.4），可添加 -webkit-background-attachment: fixed，但现代项目中已非必需。
总结来说，这不是一个“遮罩”问题，而是一个“背景同步”问题。放弃多层 DOM 和 z-index 折腾，转而利用 CSS 背景的视口锚定特性，即可用极简代码达成专业级视觉效果——清晰、可维护、高性能。
